2016-05-26 125 views
1
  1. 爲什麼myFilter調用的$scope.currentLanguageIdEnglish()France()函數值後不會改變?
  2. 是通過過濾器進行網站的不同本地化的正常方法嗎?或者現有可能是更常見的方式?

列表:Angularjs語言本地化

<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> 

控制器:

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; 
    }; 
}); 
+0

我已經親自使用了angular-translate(i18n),我認爲這些東西你也可以看一下:https://angular-translate.github.io/ – thepio

回答

1

DEMO 我會創建一個服務,並將其連接到$ rootScope所以它是可用的每一個凡在我的應用程序,不需要在每個控制器被注入

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> 

值得其他的事情指出:

  • 你的控制器太肥了,你不應該把邏輯放在你的控制器上,邏輯應該在服務中
  • 避免儘可能地使用ng-init ,在控制器內部執行