Question

我有一家工厂跟踪我的翻译。基本上我将语言设置为字符串，然后在语言更改时使用过滤器更新我的视图。

到目前为止，如果我事先在我的视图中定义语言，一切都按预期工作，但是当我点击按钮更新语言时没有任何反应。

任何人都可以指出我做错了吗？

我的观点：

<div ng-app="testApp">
  <div ng-controller="myController">
    <p >{{ data.title | translate }}</p>
    <p >{{ data.text }}</p>
    <button type="button" ng-click="changeLanguage('en')">English</button>
    <button type="button" ng-click="changeLanguage('sl')">Slovene</button>
  </div>
</div>

我的剧本：

angular.module('langService', [])
  .factory('Language', function() {
  var currentLanguage = 'en';

  return {
    setCurrentLanguage: function(value) {
      currentLanguage = value;
    },
    getCurrentLanguage: function() {
      return currentLanguage;
    }
  }
});

var testApp = angular.module('testApp', ['langService']);

testApp.controller('myController', function ($scope, Language) {
  $scope.data = {
    title: 'PAGE_TITLE',
    text :'some random page text'
  };

  $scope.changeLanguage = function(value) {
    Language.setCurrentLanguage(value);
  }
});

testApp.constant('Translations', {
  en: {
    'PAGE_TITLE': 'Hi!'
  },
  sl: {
    'PAGE_TITLE': 'Živjo!'
  }
});

testApp.filter('translate', function(Translations, Language) {
  return function(input) {
    return Translations[Language.getCurrentLanguage()][input] || '';
  };
});

我已经在codepen中创建了这个示例，以便在项目中实现它之前尝试一下。

感谢任何帮助。

Answer 1

拥有状态过滤器并不是一个好习惯，但在您的情况下，它是一个有效的用例 - 需要重新评估（在摘要循环上）。因此，您的过滤器需要标记为＆＃34;它是有状态的。

testApp.filter('translate', function(Translations, Language) {

  function translateFilter(input) {
    return Translations[Language.getCurrentLanguage()][input] || '';
  };

  // marked as stateful
  translateFilter.$stateful = true;

  return translateFilter;

});

搜索＆＃34;有状态＆＃34;过滤文档以获取更多信息： https://docs.angularjs.org/guide/filter

顺便说一下你可以使用angular-translate翻译。 http://angular-translate.github.io/查看他们的过滤器实现https://github.com/angular-translate/angular-translate/blob/master/src/filter/translate.js

AngularJS工厂/过滤器未正确更新

1 个答案: