ng-repeat与过滤器和ng-if在同一元素上的角度优先级

tos*_*skv 1 javascript angularjs

如果在同一元素上有过滤器的ng-ifng-repeat,则即使ng-if隐藏了元素,也会调用过滤器一次.

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

app.controller('MainCtrl', function($scope, $timeout) {
  $timeout(function() {
    $scope.list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  }, 2000);
});

app.filter('crashyFilter', function() {
  return function(list) {
    return list.map(function(item) {
      return item + 1;
    });
  };
});
Run Code Online (Sandbox Code Playgroud)
<body ng-controller="MainCtrl">
  <div ng-if="list" ng-repeat="item in list | crashyFilter">
    {{item}}
  </div>
</body>
Run Code Online (Sandbox Code Playgroud)

在浏览器控制台中,您可以看到地图调用失败一次,因为list参数未定义.我在这里做了一个龙头.

谁知道为什么会这样?

tos*_*skv 5

在对角度代码库进行了一些挖掘之后,我找到了原因.

NG重复指令具有优先权,而1000 NG-如果有优先权600.

$ compile服务的角度文档声明如果在同一元素上设置指令,则它们以递减的优先级顺序编译,因此ng-repeatng-if之前编译.

这就解释了为什么在ng-if之前也会调用过滤器来禁用该元素.