多ng-init范围问题

我想通过ng-init使用ng-include通过只更改其数据来重新使用相同的组件。多ng-init范围问题

分量代码（“slider.html”，其中有没有控制器）看起来是这样的：

<div ng-repeat="person in persons"> 
    {{person.name}} 
</div>

从主视图，我想重复使用相同的成分变更的“人”列表中，以便视图我有：

<!--slider #1 --> 
<div ng-init="persons=english" ng-include ="'inc/app/views/widgets/slider.html'"></div> 

<!-- slider #2 --> 
<div ng-init="persons=german" ng-include ="'inc/app/views/widgets/slider.html'"></div>

，并在控制器I初始化2只列出 “英语” 和 “德语” 是这样的：

$scope.english = records.filter(function(t){return t.nationality=="english";}); 
$scope.german = records.filter(function(t){return t.nationality=="german";});

会发生什么是2个组件显示相同的数据列表（德语）;有没有办法将2个不同的组合绑定到组件上？

来源

2014-10-27 Dario

看起来像一个良好的情况下，用于创建滑块控件作为自定义指令，而不是NG-包括以便您可以保持范围清洁，提供独特的界面，并避免像@Roberto Linares指出的问题。 – mccainz 2014-10-27 17:30:32

我结束了写一个简单的指令与一个孤立的范围和“slider.html”作为模板 – Dario 2014-10-27 22:42:09

（这两个列表被设置为德语）发生的原因是，最后，您只使用一个控制器，该控制器只有一个范围，其中存在变量persons。当AngularJS启动引导过程时，它会处理第一个ng-init，将当前控制器的个人变量更新为英文。然后它处理第二个ng-init，再次更新相同persons变量现在到德文。然后，在呈现ng-repeat时，它将采用当前和唯一的persons变量数据，因此，它是德语中的所有内容。

你可以做的是为每个组件（slider.html）设置一个独立的控制器，因此每个控制器都有自己的绑定变量，因此你可以为每个组件创建一个个人变量，并用你的ng独立初始化每个控制器的变量-init指令。例如：

<div ng-controller="MySubController" ng-repeat="person in persons"> 
    {{person.name}} 
</div>

...

<!--slider #1 --> 
<div ng-init="initMySubController(english)" ng-include ="'inc/app/views/widgets/slider.html'"></div> 

<!-- slider #2 --> 
<div ng-init="initMySubController(german)" ng-include ="'inc/app/views/widgets/slider.html'"></div>

在JS文件：

var myApp = angular.module('myApp',[]); 

myApp.controller('MySubController', ['$scope', function($scope) { 
    $scope.persons = []; 

    $scope.initMySubController = function(personsData) { 
     $scope.persons = personsData; 
    } 
}]);

来源

2014-10-27 17:27:44

多ng-init范围问题

回答

相关问题