如何根据预定义条件将 HTML 组件与 ng-repeat 绑定

Question

我对 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" 但没有结果。 :( 请帮忙。

Answer 1

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

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>

如何根据预定义条件将 HTML 组件与 ng-repeat 绑定

How to bind HTML component with ng-repeat based on a pre-defined condition

html

javascript

angularjs

angularjs-directive

angularjs-components