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

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

angularjs

angularjs将属性中新创建的数组传递给指令,angularjs,angularjs-directive,Angularjs,Angularjs Directive,我创造了这个小提琴来展示我的问题我正在将一个新创建的数组传递给一个指令，一切都很顺利。但是，控制台窗口中出现一个错误，指示：错误：[$rootScope:infdig]已达到10$digest（）迭代次数。流产有没有想过我需要按摩什么来清理这个？我希望能够重用该指令，而无需更新控制器这是html <body ng-app="myApp"> <test-dir fam-people='[1,4,6]'> </test-dir> <

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

我正在将一个新创建的数组传递给一个指令，一切都很顺利。但是，控制台窗口中出现一个错误，指示：

错误：[$rootScope:infdig]已达到10$digest（）迭代次数。流产
有没有想过我需要按摩什么来清理这个？我希望能够重用该指令，而无需更新控制器
这是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（）{
返回{restrict:'E'
，作用域：{famPeople:'=famPeople'}
，模板：“{{p}”
};
});
该错误是因为指令无法将数组解释为数组，请尝试以下操作：
<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}}"
                       };
        });

编辑
或者，您可以将其作为属性传入并将其解析为数组：
<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);
                        }
                       };
        });

var myApp=angular.module（'myApp'，[]）；
myApp.directive（'testDir'，function（）{
返回{restrict:'E'，
//作用域：{famPeople:'='}，
模板：“{{p}”，
链接：函数（范围、元素、属性）{
scope.people=JSON.parse（attrs.famPeople）；
}
};
});

请参阅。
关于：
<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（）{
返回{restrict:'E'，
//作用域：{famPeople:'='}，
模板：“{{p}”，
链接：函数（范围、元素、属性）{
scope.people=attrs.famPeople.split（“；”）；
}
};
});

最干净的解决方案？
当数组包含字符串时，JSON解析不起作用
例如：
<file-handler fh-services="['BOX','DROPBOX']"></file-handler>

谢谢，那可能有用。但是我希望能够在不更新控制器的情况下重用该指令。我已经更新了我的问题，使之更加具体。谢谢，我认为编辑更符合我的要求。我同意，在您不使用数据绑定的情况下，这看起来是更合适的解决方案。这正是我正在处理的需求所需要的。谢谢你的发帖！
<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(';');
                        }
                       };
        });

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

scope.$eval(attrs.fhServices)