javascript - 服务属性更改时， Angular 过滤器不会更新

Question

也许这是对 Angular 作用域的根本误解，但这里有。

我有一项处理更改语言偏好的服务:

languageService.js

function languageService() {
  var language = "en";

  var service = {
    getLanguage: getLanguage,
    setLanguage: setLanguage

  };

  function getLanguage () {
    return language;
  }

  function setLanguage (newLang) {
   language = newLang;
  }

  return service;
}

我还有一个格式化某些东西的过滤器:

someFilter.js

function myFilter(languageService) {
  return function(num) {
    var french = languageService.getLanguage() === 'fr';

    if (french) {
      return "is french!"
    } else {
      return "is other."
    }
  }      
}

我尝试在一些 HTML 中使用这个过滤器:Blah blah {{ 'test' | someFilter }}.

它可以工作，但只在加载时；如果我调用 setLanguage('en')，绑定(bind)不会改变。

Answer 1

您的代码实际上有两个问题。

首先，在服务中，您应该在 var 更改时触发摘要。原来如此

myApp.factory('languageService', ['$rootScope', function ($rootScope) {
  var language = "en";

  var service = {
    getLanguage: getLanguage,
    setLanguage: setLanguage

  };

  function getLanguage () {
    return language;
  }

  function setLanguage (newLang) {
   language = newLang;
   $rootScope.digest();
  }

  return service;
}]);

第二个也是更微妙的一个。在 Angular 中，只有当您在标记中传递给它们的值发生变化(在您的情况下为“测试”)时，过滤器才会更新，对于范围的任何其他更改，您的过滤器将被完全忽略。

解决方案是强制 Angular 解析任何摘要上的特定过滤器。

myApp.filter('someFilter', ['localeService', function (localeService) {
  function filter (value) {
    var french = languageService.getLanguage === 'fr';

    if (french) {
      return "is french!"
    } else {
      return "is other."
    }
  }

  filter.$stateful = true; // This line does the trick

  return filter;
}]);

您可以在 Angular Docs 上获得更多信息