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

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

第二个也是更微妙的一个.在angular中,只有当您在标记中传递的值发生更改(在您的情况下为'test')时,过滤器才会更新,对于范围的任何其他更改,您的过滤器将被完全忽略.

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

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的更多信息