Question

我正在使用angularjs创建一个支持多语言的网站。

所以这个网站有一个服务列表。每项服务都有多种语言的名称和价格。我想通过更改语言来更改每个服务的名称。

所以我写了以下代码：

myApp.controller('ServiceCtrl', ['$scope', '$http', 'languageService', function($scope, $http, languageService) {
var url = '../html/getServices.php';
//Getting following JSON:
//{"id":"1","ru":"russianNameOfAService","en":"englishNameOfAService","pr":"priceOfAService"}
$http.get(url).success(function(resp) {
    $scope.services = resp;
});
$scope.langService = languageService;
$scope.$watch(function() {
   return $scope.langService.getLang();
}, function(newLang) {
    if (newLang == 'en') {
        $('.serviceName').append('{{service.en}}');
    } else if (newLang == 'ru') {
        $('.serviceName').append('{{service.ru}}');
    }
});
}])

myApp.service('languageService' , function() {
var language = 'en';
return {
    getLang: function() {
        return language;
    },
    setLang: function(ind) {
          if (ind == '0') {
              language = 'en';
          } else if (ind == '1') {
              language = 'ru';
          }
    }
};
})

所以这是我的角度代码。这是我的HTML：

<div class="service" ng-repeat="service in services" id="{{service.id}}">
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <div class="serviceName"></div>
                <div class="servicePrice">{{service.pr}}</div>
            </div>
        </div>
    </div>
</div>

那么为什么它不起作用，或者什么是改变.serviceName div中表达式的最佳方式。

Answer 1

最简单的方法是修复手表，并使用当前语言更新范围内的变量。

$scope.$watch(function() {
   return $scope.langService.getLang();
}, function(newLang) {
       $scope.currentLanguage=newLang;
});

然后在html中使用插值

<div class="serviceName">{{currentLanguage}}</div>

向控制器表达式添加逻辑

1 个答案: