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

【问题标题】：How to bind HTML component with ng-repeat based on a pre-defined condition如何根据预定义条件将 HTML 组件与 ng-repeat 绑定
【发布时间】：2016-08-18 18:30:06
【问题描述】：

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

【问题讨论】：

你加载控制器吗？如 angular.module('product', ["your_controller"]);
您缺少很多东西，无法按照您的意图进行这项工作。这类指令通常有自己的控制器，通过控制器他们有自己的$scope 对象。此外，它们通常使用 isolated 范围，它允许组件的每个实例显示一个独立的元素（在您的情况下为 product）。在docs.angularjs.org/guide/directive的官方文档中有很好的例子说明这是如何工作的
使用隔离范围的官方文档示例的 plunker：plnkr.co/edit/MIi0qm9Vl2vfzz2mNyDM?p=preview

标签： javascript angularjs html angularjs-directive angularjs-components

【解决方案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>

【讨论】：

请注意蛇盒和骆驼盒。这是开发此功能时许多人错过的问题。
如果上述解决方案对您有帮助或遗漏了什么，请告诉我，以便我可以编辑上述解决方案。谢谢
嗨！非常感谢您的回答。这是有效的，但我必须一次绑定每个元素。是否可以通过指令将整个对象从主页传递给模板 HTML？
当然。会尽力提供帮助。您能否告诉我一个完整对象的示例，以便我可以相应地调整代码
如果答案有效，请单击勾选标记以确认答案。谢谢