1

我已经启动了我的第一个 Angular 应用程序。我有 angular-dropdowns 可以在按钮下方创建一个下拉选择列表，并且我有 angular-translations 可以更改 HTML 元素的语言（当我将代码更改为所需的语言时）。我希望将下拉列表中的选择转换为角度转换，以触发下拉列表中用户选择的更改。

我已经完成了 Angular 教程，并阅读了很多东西，但我什至没有想到连接这两个工作组件的组件名称。我在下面 2 个地方的编码尝试被注释为 - 测试代码。其余的工作。角度下拉列表中的警报正常工作，但我之前的测试代码没有。我在控制台中没有错误。

HTML

<div id="leftOfMap" class="floatingSection" data-ng-controller="languageController">
<ul>
  <li class="leftOfMapItem"><button id="languageButton" dropdown-menu="ddMenuOptions" dropdown-model="ddMenuSelected" class="btn-menu" data-ng-contoller="Ctrl">Language</button></li>
  //other li's
</ul>
</div>

角/Javascript

var residenceApp = angular.module('residenceApp', [
'google-maps', 
'ngDropdowns', 
'pascalprecht.translate',
'ngCookies']);
residenceApp.config(['$translateProvider', function ($translateProvider) {
'use strict';
    // provide translation tables
    $translateProvider.translations( "en", oHome_en ); //oHome_en is JSON data
    $translateProvider.translations( "es", oHome_es ); //oHome_es is JSON data

//test code for changing languages from the Language button
angular.module('residenceApp').controller('Ctrl', ['$translate', '$scope', function ($translate, $scope) {           
  $scope.changeLanguage = function (langKey) {
    $translate.use(langKey);
  };             
}]); 
//end test code for changing languages

$translateProvider.preferredLanguage("en"); //sets initial language
}]);

//dropdown component for language selection
residenceApp.controller('languageController', ['$scope', '$http',
  function ($scope, $http) {
'use strict';
var languageChoices = [
    {
        "text": "English",
        "val": "en"
    },
    {
        "text": "Español",
        "val": "es"
    }
];
$scope.ddMenuOptions = languageChoices;
$scope.ddMenuSelected = {};
$scope.$watch('ddMenuSelected', function(newVal) {
    if (newVal && newVal.text) {
      var langKey = JSON.stringify(newVal.val); //eg. = en

//test code to change languages
residenceApp.controller('Ctrl', ['$translate', '$scope', function ($translate, $scope) {     
        $scope.changeLanguage = function (langKey) {
            $translate.use(langKey);
        };
}]);
//end of test code

  alert('Changed dropdopwn selection: ' + JSON.stringify(newVal) + langKey);
}
}, true);
}]);
4

1 回答 1

1

服务可用于在您的应用程序中共享代码。你可以这样定义一个服务：

residenceApp.factory('changeLanguage', ['$translate', function(translate) {
  return function(langKey) {
    translate.use(langKey);
  }
}]);

然后在你的控制器中调用它，如：

//dropdown component for language selection
residenceApp.controller('languageController', ['$scope', 'changeLanguage', function ($scope, changeLanguage) {
  $scope.ddMenuSelected = {};
  $scope.$watch('ddMenuSelected', function(newVal) {
    if (newVal && newVal.text) {
      var langKey = newVal.val; //eg. = en
      //test code to change languages
      changeLanguage(langKey);
      //end of test code
      alert('Changed dropdopwn selection: ' + JSON.stringify(newVal) + langKey);
    }
  }, true);
}]);

这是一个 Plunk，展示了在其自己的模块中带有控制器和工厂的基本设计模式。

这是另一个使用 angular-dropdown 和 angular-translate 在网页中的翻译之间切换的示例。

于 2014-07-21T19:32:19.013 回答