AngularJS工厂/过滤器没有正确更新

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

到目前为止，如果我事先在我的视图中定义语言，一切都按预期工作，但是当我单击按钮更新语言时，什么都不会发生。

任何人都可以请指出我做错了什么？

我的观点：

<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创建以此为例在项目实施之前尝试一下。

任何帮助表示赞赏。

来源

2016-01-07 Miha Šušteršič

我认为，因为您的数据没有改变，表达式没有被重新评估。显式$ scope。$ digest（）在changeLanguage方法的末尾是否有帮助？ –

拥有状态过滤器并不是一个好习惯，但在您的情况下，这是一个有效的用例 - 需要重新评估（在摘要循环上）。所以你的过滤器需要“标记”它是有状态的。

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

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

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

    return translateFilter; 

});

搜索文档中的“状态”过滤器的详细资料： https://docs.angularjs.org/guide/filter

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

来源

2016-01-07 11:55:26

哇... TIL！谢谢 –

AngularJS工厂/过滤器没有正确更新

回答

相关问题