Question

我试图通过ng-init使用ng-include通过仅更改其数据来重用相同的组件。

组件代码（＆＃34; slider.html＆＃34;，没有控制器）如下所示：

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

从主视图中，我想重复使用相同的组件来改变＆＃34; person＆＃34;列表所以在视图中我有：

<!--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>

在控制器中我初始化了2个列表＆＃34; english＆＃34;和＆＃34;德国＆＃34;像这样：

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

两个组件显示相同的数据列表（德语）;有没有办法将2个不同的集合绑定到组件？

Answer 1

那个（将两个列表设置为德语）发生的原因是，最后，您只使用一个控制器，该控制器只有一个存在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;
    }
}]);

多个ng-init范围问题

1 个答案: