Question

我想这样做：我在Angular controller中有一个对象数组，我想写一个指令，对于该数组的每个成员，在HTML视图中创建一个div元素，如果新项目来到数组，查看更新自动删除项目，HTML也会更新。我这样做：

这是我的控制者：

app.controller("timelineCtrl", function ($scope) {
    $scope.arr={};
         .
         .
         .
}

这是我的指示：

app.directive('helloWorld', function() {
    return {
        restrict: 'AE',
        replace: true,
        template: '<div> Hello {{arrayItem}} </div>',

        link: function ($scope, element, attrs) {
            //here i know that i have to write some code 
            // i have to watch any changes in array and compile it to HTML view
        }
    };
});

这是我的观点：

<div class="row" ng-controller="timelineCtrl">
     <hello-world></hello-world>
</div

我知道我必须在指令的link属性中编写一些代码，但我无法做到这一点。我必须为该数组创建一个循环并检查值？

Answer 1

这样的事情怎么样？使用ng-repeat对数组进行迭代将处理新项目和已删除项目。（你不需要在链接功能中做任何事情）

 app.directive('helloWorld', function() {
        return {
            restrict: 'AE',
            replace: true,
            scope:{
                   arrayItem: '=ngModel'
              },
        template: '<div> Hello {{arrayItem}} </div>',

    };
});


<div class="row" ng-controller="timelineCtrl">
     <hello-world ng-repeat="arrayItem in arr" ng-model="arrayItem"></hello-world>
</div>

Answer 2

Angular有ng-repeat指令来显示数组形式的项目。出于您的目的，您可以创建一个负责单项逻辑的指令，并使用ng-repeat来呈现这些项目。 Ng repeat将关注数组中添加或删除的项目：

<div class="row" ng-controller="timelineCtrl">
    <hello-world ng-repeat="arrayItem in arr" array-item="arrayItem"></hello-world>
</div

要将项目数据传播到指令，您应该执行此配置

app.directive('helloWorld', function() {
  return {
    restrict: 'AE',
    template: '<div> Hello {{arrayItem}} </div>',
    scope: {
       arrayItem: '=' // this means that scope value should be taken from attribute with corresponding name
    },

    link: function ($scope, element, attrs) {
        // your logic with single arrayItem
        // item available as $scope.arrayItem
    }
  };
});

您可以在that page上查看“范围”部分了解有关角度文档的工作原理的详情

追加儿童潜入Angular指令

2 个答案: