Question

我尝试关注http://blog.novanet.no/creating-multilingual-support-using-angularjs/中的示例使用AngularJS进行多语言支持。这个例子效果很好。

我尝试了另一种方法来实现它。我使用ng-include通过使用AngularJS ng-include来管理标题，内容和页脚的模块分离。

我的HTML结构是这样的：

<div ng-include = "'header.html'"> </ div>
<div ng-include = "'content.php'"> </ div>
<div ng-include = "'footer.html'"> </ div>

我将工作保存在Plunker

上

我的问题是，当我尝试实现多语言，并将语言选择器放在header.html而结果放在content.php时，它无法正常工作。

Answer 1

当您的模板创建模型时，它们会在当前作用域上执行此操作，而不与控制器作用域共享（如上一个答案中所述，ng-include创建一个新的子作用域）。由于继承的工作方式，添加到此子范围的项目对父项（或兄弟）不可见。

但是，如果您将项目添加到父作用域中已有的项目（google＆＃34;点符号角度＆＃34;），那么这些添加内容将对父级和兄弟级别可见。

执行此操作的好方法是使用controller-as语法。我updated your Plunk

<body ng-app="myApp" ng-controller="myController as vm">

    app.controller('myController',['$scope', 'translationService', 
function ($scope, translationService){  

  //Run translation if selected language changes
  $scope.translate = function(){
       translationService.getTranslation($scope, $scope.vm.selectedLanguage);
   };

   //Init
   $scope.vm.selectedLanguage = 'en';
   $scope.translate();

}]);

AngularJs：如何在两个范围之间进行通信

1 个答案: