AngularJS 自定义过滤器调用了 2 次答案

【问题标题】：AngularJS custom filter called 2 timesAngularJS 自定义过滤器调用了 2 次
【发布时间】：2016-07-04 04:32:40
【问题描述】：

我正在尝试来自：https://scotch.io/tutorials/building-custom-angularjs-filters#filters-that-actually-filter 的 Angular 自定义过滤器示例，在我的版本中看起来像：

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="demo" >

    <div>
      
                   <p><strong>Original:</strong></p>
                   <ul class="list">
                     <li ng-repeat="x in example1">{{ x.name }}</li>
                   </ul>
                   <p><strong>Static Language Filter:</strong></p>
                   <ul class="list">
                     <li ng-repeat="x in example1 | staticLanguage">{{x.name }}</li>
                   </ul>
               
      </div>

</div>

<script>
var app = angular.module('myApp', []);
var counter=0;

app.controller('demo', function($scope){  
  $scope.example1 = [
    {name: 'C#', type : 'static'},
    {name: 'PHP', type : 'dynamic'},
    {name: 'Go', type : 'static'},
    {name: 'JavaScript', type: 'dynamic'},
    {name: 'Rust', type: 'static'}
  ];
  
});


// Setup the filter
app.filter('staticLanguage', function() {  // Create the return function and set the required parameter name to **input**
  return function(input) {
    counter+=1;
    console.log(counter);    
    var out = [];
    // Using the angular.forEach method, go through the array of data and perform the operation of figuring out if the language is statically or dynamically typed.
    angular.forEach(input, function(input) {
      if (input.type === 'static') {       
        out.push(input);
      }      
    });    
    return out;

  };
});

</script>

</body>
</html>

从 console.log 看来，由于某种原因，自定义过滤器函数 staticLanguage 被调用了两次，但从代码本身来看，它只被调用了一次：ng-repeat="x in example1 | staticLanguage"

有人知道为什么吗？

P.S 我还没有弄清楚“脏检查”与我的问题有什么关系...... 如果我删除计数器变量并在其中放置一些 console.log("text") 仍然会调用 staticLanguage 函数两次

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

据我所知，这是由于 AngularJS 脏检查造成的，并且已在其他地方here 得到确认。这是正常的，请阅读链接。

【讨论】：

【解决方案2】：

这很正常，angularjs 使用了 'dirty-check' 的方法，所以它需要调用所有的过滤器来查看是否存在任何变化。在此之后，它检测到您对一个变量（您键入的变量）进行了更改，然后再次重新执行所有过滤器以检测它是否有其他更改。

查看此问题的第一个答案

How does data binding work in AngularJS?

【讨论】：

所以如果我从中删除计数器变量，它只会运行一次 staticLanguage？

【解决方案3】：

好吧，我不知道这是否对你有用，但这里有一个 sn-p 工作，可能是你的解决方案：

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

app.controller('mainCtrl', function($scope) {
  $scope.languages = [  
    {  
      "name":"C#",
      "type":"static"
    },
    {  
      "name":"PHP",
      "type":"dynamic"
    },
    {  
      "name":"Go",
      "type":"static"
    },
    {  
      "name":"JavaScript",
      "type":"dynamic"
    },
    {  
      "name":"Rust",
      "type":"static"
    }
  ];
  
  $scope.static_languages = $scope.languages.filter(x => x.type == 'static');
  $scope.dynamic_languages = $scope.languages.filter(x => x.type == 'dynamic');
});

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js">
</script>
</head>
<body ng-controller="mainCtrl">
  <div>
<p><strong>All languages:</strong></p>
<ul class="list">
  <li ng-bind="language.name" ng-repeat="language in languages"></li>
</ul>
<p><strong>Static Languages Filter:</strong></p>
<ul class="list">
  <li ng-bind="language.name" ng-repeat="language in static_languages"></li>
</ul>
<p><strong>Dynamic Languages Filter:</strong></p>
<ul class="list">
  <li ng-bind="language.name" ng-repeat="language in dynamic_languages"></li>
</ul>
  </div>
</body>
</html>

【讨论】：