Javascript 角度滤波器不'；当服务属性更改时不更新

也许这是对角度范围的一个根本性的误解，但还是这样

我有一个处理更改语言首选项的服务：

languageService.js

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

  var service = {
    getLanguage: getLanguage,
    setLanguage: setLanguage

  };

  function getLanguage () {
    return language;
  }

  function setLanguage (newLang) {
   language = newLang;
  }

  return service;
}

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

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

我还有一个过滤器，用于格式化某些内容：

someFilter.js

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

  var service = {
    getLanguage: getLanguage,
    setLanguage: setLanguage

  };

  function getLanguage () {
    return language;
  }

  function setLanguage (newLang) {
   language = newLang;
  }

  return service;
}

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'）

，绑定不会改变。

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

首先，在服务中，当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中，只有在标记中传递的值发生更改（在您的示例中为“test”）时，才会更新过滤器，因为对范围的任何其他更改都将完全忽略过滤器

解决方案是强制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;
}]);

---

您可以在

上获得更多信息，您需要从languageService.js返回“service”。另外，在过滤器中，确保在声明var french时实际调用了getLanguage方法（）。我将把它添加进去。

filter.$stateful

完成了这个技巧-当语言更改时，各种其他操作会触发摘要循环，因此不需要添加。明亮的