angularjs将属性中新创建的数组传递给指令答案

【问题标题】：angularjs pass newly created array in attribute to directiveangularjs将属性中新创建的数组传递给指令
【发布时间】：2015-08-15 20:22:05
【问题描述】：

我创建了这个小提琴来显示我的问题...

http://jsfiddle.net/dQDtw/

我将一个新创建的数组传递给一个指令，一切正常。但是，我在控制台窗口中收到一条错误消息：

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!

对我需要按摩什么来清理这个有什么想法吗？我希望能够重用指令而不需要更新控制器。

这里是html

<body ng-app="myApp">
    <test-dir fam-people='[1,4,6]'> </test-dir>
    <test-dir fam-people='[2,1,0]'> </test-dir>
</body>

这里是 JS。

var myApp = angular.module('myApp', []);

myApp.directive('testDir', function() {
            return { restrict: 'E'
                   , scope: { famPeople: '=famPeople' }
                   , template: "<ol> <li ng-repeat='p in famPeople'> {{p}}"
                   };
    });

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

该错误是因为您的指令无法将数组解释为数组，试试这个：

<body ng-app="myApp" ng-controller="ctrl1">
    <test-dir fam-people='people'> </test-dir>

</body>



var myApp = angular.module('myApp', []);

myApp.directive('testDir', function() {
                return { restrict: 'E'
                       , scope: { famPeople: '=' }
                       , template: "<ol> <li ng-repeat='p in famPeople'> {{p}}"
                       };
        });

控制器和指令：

myApp.controller("ctrl1",function($scope){
$scope.people=[1,4,6];
});

编辑

或者你可以将它作为一个属性传入并解析为一个数组：

<body ng-app="myApp" >
    <test-dir fam-people='[1,4,6]'> </test-dir>

</body>

指令：

var myApp = angular.module('myApp', []);

myApp.directive('testDir', function() {
                return { restrict: 'E', 
                        //scope: { famPeople: '=' },
                       template: "<ol> <li ng-repeat='p in people track by $index'> {{p}}",
                        link:function(scope, element, attrs){
                      scope.people=JSON.parse(attrs.famPeople);
                        }
                       };
        });

见fiddle。

【讨论】：

谢谢，这可能行得通。但我希望能够在不更新控制器的情况下重用指令。我更新了我的问题，使其更具体
谢谢，我认为编辑更符合我的要求。

【解决方案2】：

当数组包含字符串时，JSON 解析不起作用。

例如：

<file-handler fh-services="['BOX','DROPBOX']"></file-handler>

在指令中，您可以使用scope.$eval 将属性中出现的内容转换为数组。

scope.$eval(attrs.fhServices)

【讨论】：

我同意，当您不使用数据绑定时，这看起来是更合适的解决方案。
这正是我正在处理的需求所需要的。感谢发帖！

【解决方案3】：

怎么样：

<body ng-app="myApp">
    <test-dir fam-people='1;4;6'> </test-dir>
    <test-dir fam-people='2;1;0'> </test-dir>
</body>

和

    var myApp = angular.module('myApp', []);

    myApp.directive('testDir', function() {
                return { restrict: 'E', 
                        //scope: { famPeople: '=' },
                       template: "<ol> <li ng-repeat='p in people track by $index'> {{p}}",
                        link:function(scope, element, attrs){
                      scope.people= attrs.famPeople.split(';');
                        }
                       };
        });

最干净的解决方案？

【讨论】：