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工廠/過濾器沒有正確更新

回答

相關問題