我有一个我想在不同情况下使用的指令,但所有指令都将提供一个列表(数组),从中获取信息。
问题是每个阵列都可以被多个过滤器过滤(其中一些是自定义过滤器)。例如:
<select-search data-list="Ctrl.players | playersByDate:Ctrl.event.datetime | orderBy: 'name'"></select-search>
正如我所说,这些数组可以应用一个,多个或零个过滤器,其中一些是定制的,而另一些则不是(如orderBy
)。问题在于,当我这样做时,我的任何过滤器(定制和角度过滤器)都会出现$digest
周期错误。
首先,我已经阅读了原因,但我不理解它们,因为我在列表中使用单向绑定:
scope:{
property: '@',
ref: "=",
list: "<",
change: "&?"
}
因此,它应该只触发一次(当它第一次被过滤时),因为在此之后,任何一方都没有进行其他更改。
对此,我想知道如何在将列表/数组发送到指令时过滤列表/数组(因此,不要通过JS在另一个变量中过滤和存储它)得到任何$digest
错误。
根据要求,我已将代码编写在一个代码段(JsFiddle here)中:
(function(){
var app = angular.module("AppMd", []);
app.controller("Control", [function(){
var vm = this;
vm.players = [
{name: 'Player 1'},
{name: 'Player 2'},
{name: 'Player 3'}
];
}]);
app.directive("selectSearch", function(){
return {
restrict: 'E',
scope:{
list: "<"
},
replace: true,
template: '<ul><li data-ng-repeat="obj in list">{{obj.name}}</li></ul>',
link: function(scope, element, attrs, controller, transclude){
return false;
}
}
});
})();
&#13;
<script src="https://code.angularjs.org/1.6.4/angular.min.js"></script>
<div ng-app="AppMd" ng-controller="Control as Ctrl">
<select-search data-list="Ctrl.players | orderBy: 'name'"></select-search>
</div>
&#13;
正如您所看到的,它可以正常工作,但如果您查看控制台,您将会看到它触发的错误。
谢谢!