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')，绑定就不会改变。

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;
}]);

第二个也是更微妙的一个。在有角度的情况下，只有当您在标记中传递的值发生更改时（在您的情况下为＆＃39; test＆＃39;），过滤器才会更新，对于范围的任何其他更改，您的过滤器将被完全忽略。

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

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

上获得更多信息

当服务属性更改时，角度过滤器不会更新

1 个答案: