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

I've created this fiddle to show my issue...

我创造了这个小提琴来展示我的问题......

I'm passing a newly created array to a directive, and everything is working out just fine. However, I'm getting an error in the console window indicating:

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

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

错误：[$ rootScope：infdig] 10 $ digest（）迭代达成。中止！

Any thoughts on what I need to massage to clean this up? I'd like to be able to reuse the directive without the need to update the controller.

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

Here is the html

这是html

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

Here is the JS.

这是JS。

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

var myApp = angular.module（'myApp'，[]）;

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

3 个解决方案

#1

That error is because your directive is not able to interpret the array as an array, Try this:

该错误是因为您的指令无法将数组解释为数组，请尝试以下操作：

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

Controller and directive:

控制器和指令：

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

EDIT

编辑

or you could pass it in as an attribute and parse it to an array:

或者您可以将其作为属性传递并将其解析为数组：

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

</body>

Directive:

指示：

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

See fiddle.

看小提琴。

#2

JSON parse doesn't work as effective when the array contains string.

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

For example:

例如：

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

In the directive you can use scope.$eval to convert what appears in the attribute to an array.

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

scope.$eval(attrs.fhServices)

#3

what about:

关于什么：

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

and

和

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

cleanest solution?

最干净的解决方案？

#1