javascript - 自动刷新 .filter() 范围

Question

如何更新下面的过滤器，有什么办法吗？

.controller('MainCtrl', ["$rootScope", "$scope", function($rootScope, $scope) {

  $rootScope.number = 1;
  $scope.text = "foo|baz|bar"

}]).filter("MyFormat", ["$rootScope", function($rootScope){
  return function(str){
      return str.split("|")[$rootScope.number]
  }
}])

<button ng-click="$root.number = 0">0</button><!--foo-->
<button ng-click="$root.number = 1">1</button><!--baz-->
<button ng-click="$root.number = 2">2</button><!--bar-->
<pre>{{text | MyFormat}}</pre>

这是我的 Plunker示例。

Answer 1

过滤器始终首先接收输入值，但您可以在过滤器中传入由 : 分隔的其他参数。在本例中，我已将您的范围变量号传递给它。

你不需要$rootScope，你可以只使用 Controller 范围。另外，当您在 html 中引用作用域变量时，只需使用名称而不是 $scope 部分。所以清理后的版本看起来像:

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

//Assuming that you do want to use the $rootScope for one reason or another,
//you still access it in the HTML as if it were a scope variable with just
//the name (because it is just a scope variable, it's just one inherited from
//the root).

  .controller('MainCtrl', ["$rootScope", "$scope",
    function($rootScope, $scope) {

      $rootScope.number = 1;
      $scope.text = "foo|baz|bar"

    }
  ])
  .filter("MyFormat", function() {
    return function(str, num) {
      return str.split("|")[num];
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="MyApp">
  <div ng-controller="MainCtrl">
    <button ng-click="number = 0">0</button>
    <!--foo-->
    <button ng-click="number = 1">1</button>
    <!--baz-->
    <button ng-click="number = 2">2</button>
    <!--bar-->
    <pre>{{text | MyFormat : number}}</pre>
  </div>
</div>