javascript - Angularjs 语言本地化

Question

1. 为什么在调用 English() 或 France() 函数后 myFilter 中的 $scope.currentLanguageId 值没有改变？
2. 通过过滤器对网站进行不同的本地化是正常的方法吗？或者现有的可能是更常见的方式？

列表:

<div ng-init="GetList()">
    <div ng-repeat="item in items | filter: myFilter">
        {{item.Text}} {{item.LanguageId}}
    </div>
</div>

菜单:

<div class="menu">
    <ul>
        <li><a href="#/about">About</a></li>
        <li><a href="#/contacts">Contacts</a></li>
        <li><a>Test</a></li>
        <li><a>Test</a></li>
        <li><a>Test</a></li>
        <li><input type="button" value="En" ng-controller="homeController" ng-click="English()" /></li>
        <!--<li><a>En</a></li>
        <li><a>Fr</a></li>-->
    </ul>
</div>

Controller :

app.controller('homeController', function ($scope, $http) {
    $scope.items = [];
    $scope.currentLanguageId = '';
    $scope.GetList = function () {
        $http({
            method: 'GET',
            url: '/Home/GetList',
            params: { languageId: '1'}
        }).then(function successCallback(response) {
            $.each(response.data, function (id,item) {
                $scope.items.push({ Text: item.Text, LanguageId: item.LanguageId });
            });
    }, function errorCallback(response) {
        alert('Error');
    });
    }
    $scope.English = function () {
        $scope.currentLanguageId = '2';
    }
    $scope.France = function () {
        $scope.currentLanguageId = '3';
    }
    $scope.myFilter = function (item) {
        console.log($scope.currentLanguageId);
        return item.LanguageId == $scope.currentLanguageId;
    };
});

Answer 1

DEMO我将为此创建一个服务，并将其附加到 $rootScope，以便它在我的应用程序中随处可用，并且不需要注入(inject)到每个 Controller 中

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

app.run(function(langService){

  langService.fetch('spanish');

});

app.controller('MainController', function(){

  var vm = this;

});

app.service('langService', function($rootScope){

  this.current = {};

  this.fetch = function(lang){

    //do your fetching here with $http
    $rootScope.lang = {

      ok: 'si',
      yes: 'si',
      no: 'no'

    };

  };

});

然后您可以在应用程序中的任何位置使用它，例如

<button>{{$root.lang.ok}}</button>
<button>{{$root.lang.no}}</button>

其他值得指出的事情:

• 你的 Controller 太胖了，你不应该把逻辑放在 Controller 上，逻辑应该放在服务中
• 尽可能避免使用 ng-init，在 Controller 内部进行