javascript - 更好的方法来听变化-AngularJS

我只是在玩Angular JS，并且会感谢你们那里的大师们的一些意见：D

我正在做的是实现自己的本地化代码（我知道，我知道那里有库，我应该使用它们。但是请理解，我这样做是为了提高我对框架的理解）

有一个选择框显示语言列表，当我更改语言时，这些术语会被翻译。

HTML：

    <div ng-controller="LanguageController">
        <div><span>Current Language: {{language}}</span></div>
        <div><span>Term 1: {{dictionary.term1}}</span></div>
        <div><span>Term 2: {{dictionary.term2}}</span></div>
        <div>
            <select ng-model="language" ng-change="changeLanguage(language)">
                <option ng-repeat="(key, value) in lanugages" value="{{key}}">{{key}}</option>
            </select>
        </div>
    </div>

App.js文件

(function(){
return angular.module('testApp', ['ngRoute'])
    .controller('LanguageController',['$scope',function($scope){
        $scope.lanugages = {
            'English':{
                'term1':'This is Term 1 in English',
                'term2':'This is Term 2 in English'
            },
            'French':{
                'term1':'This is Term 1 in French',
                'term2':'This is Term 2 in French'
            },
            'Vietnamese':{
                'term1':'This is Term 1 in Vietnamese',
                'term2':'This is Term 2 in Vietnamese'
            }
        };
        $scope.language = 'English';
        $scope.dictionary = $scope.lanugages[$scope.language];

        $scope.$watch('language', function() {
            $scope.dictionary = $scope.lanugages[$scope.language];
        });

        $scope.changeLanguage = function(lang){
            $scope.language = lang;
        }

    }]);
})();

请注意，我添加了一个$watch语句，该语句侦听language变量中的更改并基于dictionary的值更新language的值。

我想做的是知道是否还有其他（可能更复杂）的方法来监听language中的更改并更新dictionary而不使用$watch

先谢谢了

-M

最佳答案

编辑：响应评论，这是另一个版本：http://jsfiddle.net/dn3w41cx/9/

它完全不需要控制器中的数据工作。

这是代码：

javascript

function LanguageController($scope) {
    $scope.languages = [
        {
            name:'English',
            'term1': 'This is Term 1 in English',
                'term2': 'This is Term 2 in English'
        },
            {
                name:'French',
            'term1': 'This is Term 1 in French',
                'term2': 'This is Term 2 in French'
        },
             {
                 name:'Vietnamese',
            'term1': 'This is Term 1 in Vietnamese',
                'term2': 'This is Term 2 in Vietnamese'
        }
    ];

}

html

<div ng-app>
    <div ng-controller="LanguageController">
        <div><span>Current Language: {{language.name}}</span>
        </div>
        <div><span>Term 1: {{language.term1}}</span>
        </div>
        <div><span>Term 2: {{language.term2}}</span>
        </div>
        <div>
            <select ng-options="item.name for item in languages" ng-model="language"
                    ng-init="language=languages[0]">
            </select>
        </div>
    </div>
</div>

旧答案：

如果您想使用漂亮的语法，则可以在changeLanguage函数中实现以下内容：http://jsfiddle.net/dn3w41cx/6/

否则，您可以在JavaScript中进行如下操作，而无需进行任何特殊更改：http://jsfiddle.net/dn3w41cx/5/