1

我对 AngularJS 很陌生。我制作了一个 html 组件，可以在整个应用程序中重复使用。假设这个组件给出了产品的基本信息。HTML的基本结构如下：

<div class="visible-sm-block">
    <div class="row">
        <div class="col-sm-2">
            <img class="img-circle img-responsive" alt="Image of product"
                 ng-src="{{}}"/>
        </div>
        <div class="col-sm-10">
            <label>{{ProductName}}</label>
            <p>{{CompanyName}}</p>
            <p>{{ShippedTo}}</p>
        </div>
    </div>
</div>

product.js 文件如下：

(function() {
    'use strict';

    angular
        .module('product')
        .directive('productDetails', productDetails);

    /** @ngInject */
    function productDetails() {
        var directive = {
            restrict: 'E',
            templateUrl: 'app/components/productDetails/productDetails.html'
        };
        return directive;
    }

})();

小 HTML 组件将在应用程序中的其他 HTML 页面中重用，如下所示：

<product-details></product-details>

现在的问题是当它在我的页面中使用时，我无法将数据与 HTML 组件绑定。这些页面的控制器位于一个单独的文件夹中：app/productshipping/productshipping.controller.js 我尝试在 HTML 组件本身中使用 ng-controller="controller_name" 但没有结果。：（ 请帮忙。

4

1 回答 1

1

这真是一个有趣的问题。代码如下。我正在开发一个角度框架。因此，如果您需要任何进一步的帮助，请告诉我。

Product.js 文件如下

"use strict";

angular.module("app",[]);

angular.module("app").controller("productController", ['$scope', function ($scope) {


}]);

angular.module("app").directive("tmHtml", function () {
    return {
        transclude: false,
        scope: {
            productName: '@',
            companyName: '@',
            shippedTo: '@'
        },
        controller: "productController",
        templateUrl: "/templates/HideShow.html"

    };

});

模板 HTML 文件如下

<html ng-app="app">
<head>
    <title></title>
    <link href="../Content/bootstrap.min.css" rel="stylesheet" />
    <script src="../Scripts/jquery-1.10.2.js"></script>
    <script src="../Scripts/bootstrap.js"></script>
</head>
<body ng-controller="productController">
    <div class="visible-sm-block">
        <div class="row">
            <div class="col-sm-2">
                <img class="img-circle img-responsive" alt="Image of product" ng-src="{{}}" />
            </div>
            <div class="col-sm-10">
                <label>{{productName}}</label>
                <p>{{companyName}}</p>
                <p>{{shippedTo}}</p>
            </div>
        </div>
    </div>
</body>

</html>

如何重用这个如下

<html ng-app="app">
<head>
    <title></title>
    <link href="../Content/bootstrap.min.css" rel="stylesheet" />
    <script src="../Scripts/jquery-1.10.2.js"></script>
    <script src="../Scripts/bootstrap.js"></script>
    <script src="../Scripts/angular.js"></script>
    <script src="../js/Product.js"></script>
</head>
<body>
   <div>
       <tm-Html product-Name="Sankar" company-Name="Sankar" shipped-To="Sankar">
       </tm-Html>      
   </div>
</body>

</html>
于 2016-04-25T12:32:49.217 回答