AngularJS:在指令

时间:2017-08-04 09:02:23

标签: javascript angularjs angularjs-directive angularjs-filter angular-digest

我有一个我想在不同情况下使用的指令,但所有指令都将提供一个列表(数组),从中获取信息。

问题是每个阵列都可以被多个过滤器过滤(其中一些是自定义过滤器)。例如:

<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)中:

&#13;
&#13;
(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;
&#13;
&#13;

正如您所看到的,它可以正常工作,但如果您查看控制台,您将会看到它触发的错误。

谢谢!

0 个答案:

没有答案