在Angular指令内将儿童潜水附加到HTML视图_JavaScript

我想这样做：我在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属性内编写一些代码，但是我不能这样做。 我必须为该数组创建一个循环并检查值？

这样的事情怎么样？ 使用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>

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
    }
  };
});

您可以在angular文档中了解有关其工作原理的更多信息，在请参见“范围”部分

在Angular指令内将儿童潜水附加到HTML视图

问题描述

1楼

2楼