Question

关于angularjs过滤器如何工作的假设：

1。当输入（或它的子属性）改变时调用过滤器：

示例：

{{input | myFilter}}

myFilter将在更改$scope.input时执行。

2。当$ scope观察器发生变化时调用过滤器

示例：

{{input | myFilter}}

更改myFilter时将执行

$scope.input。当另一个$scope.input2更改时，过滤器也将执行

我决定编写一个演示来确保我的假设是正确的：

我写了一个helloWorld过滤器。在此过滤器中，它将收到对象（其中包含我的英文名称）和返回字符串（这是我的越南名称）。每次调用过滤器时，我都会更新输入对象中的updateIn

(function(angular) {
  'use strict';
angular.module('myReverseFilterApp', [])
  .filter('helloWorld', function() {
    return function(input, uppercase) {
      //Note that input is an object
      var vietnameseName = input.name+ " Nguyen";
      input.vietnameseName = vietnameseName;
      input.updateIn = new Date();
      return vietnameseName;
    };
  })
  .controller('MyController', ['$scope', function($scope) {
    $scope.person  = {
      name : "John",
      wife: {
        name: "Bella" ,
        vietnameseName: ""
      },
      vietnameseName: ""
    };
    
    $scope.strange = {
      name: "Anonymous"
    };
    $scope.watched = [];
    $scope.$watch("person.vietnameseName", function(newValue,oldValue){
       $scope.watched.push(new Date());
      
    });
    
  }]);
})(window.angular);

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example30-production</title>
  

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  

   
</head>
<body ng-app="myReverseFilterApp">
  <div ng-controller="MyController">
  My name: <input ng-model="person.name" type="text"><br>
  My wife's name: <input ng-model="person.wife.name" type="text"><br>
  Someone else's name: <input ng-model="strange.name" type="text"><br>
  
  *My name in Vietnamese: {{person|helloWorld}}<br>
  Update in :{{person.updateIn}}<br />
  *My wife's name in Vietnamese: {{person.wife|helloWorld}}<br>
  Update in :{{person.wife.updateIn}}<br />
  <br />
  Watch for `person.vietnameseName`: <br/>
  {{watched}}
</div>
</body>
</html>

以下是我的测试用例：

更新$scope.person.name
- $scope.person.updateIn已更改
- $scope.person.wife.updateIn也发生了变化。
=＆GT;我的假设1错误。我改变$scope.person.wife.updateIn时更改了$scope.person.name（它应该只更改$scope.person.updateIn）
更新$scope.strange.name
- $scope.person.updateIn已更改
- $scope.person.wife.updateIn也发生了变化。
=＆GT;我的假设2是对的。当有更改时调用过滤器

所以：当发生变化时调用过滤器

此处存在问题：因为我在过滤器中更改了$scope.person.vietnameseName。 =＆GT;它可能会导致循环：

呼叫过滤器=＆gt;更新$scope.person.vietnameseName =＆gt;呼叫过滤器=＆gt; ..继续前进

但是，实际上这里没有循环。

最后，我的问题是： angularjs过滤器的实际工作方式是什么？

angularjs过滤器如何工作，是否在每个摘要中调用过滤器？

0 个答案: