Javascript 将数据发送到AngularJs中的特定控制器

我想知道对于AngularJs中的以下情况是否有一个良好的实践解决方案：

我有一个基本上显示元素列表的html和一个作为视图模型并处理该列表的某些事件的控制器。 我在我的应用程序中的不同位置使用这个html/控制器组合 使用ng包括

List.html:

<div ng-controller="listController">
<!--... display List here-->
</div>

到目前为止，这种方法一直运作良好。但现在我遇到了这样的情况，一个父控制器有多个这些列表作为子级，但我希望它们显示不同的元素。对于广播活动，我总是为所有子列表设置元素！使用工厂也会带来同样的问题，因为所有ListController都具有相同的控制器功能

parent.html

<div ng-controller="parentController">
  <!--first list-->
  <div ng-include='"List.html"'></div>

  <!-- second list -->
  <div ng-include='"List.html"'></div>
</div>

---

有没有一种方法可以在不必为我想要显示的每个列表编写新控制器的情况下完成此操作

我脑海中的一个解决方案是为每个控制器设置一个行列式参数，另一个解决方案是为每个列表使用一个指令，您可以了解更多关于指令的信息，第一个解决方案是一个示例

HTML

---

我脑海中的一个解决方案是为每个控制器设置一个行列式参数，另一个解决方案是为每个列表使用一个指令，您可以了解更多关于指令的信息，第一个解决方案是一个示例

HTML

---

它切换到组件和设置属性的最佳方式，或者在子控制器中需要父控制器

但是，如果您想使用ng include，请尝试

ng repeat

。它为每个迭代创建独立的作用域，并通过$scope.$parent设置子作用域可用的

$index

和变量值

因此，您的代码将如下所示：

<div ng-controller="parentController">
    <div ng-repeat="ctrlId in ['first', 'second']" ng-include='"List.html"'></div>
</div>

---

更好的方法是将模板转换为组件

它切换到组件并设置属性或在子级中需要父控制器的最佳方法

但是，如果您想使用ng include，请尝试

ng repeat

。它为每个迭代创建独立的作用域，并通过$scope.$parent设置子作用域可用的

$index

和变量值

因此，您的代码将如下所示：

<div ng-controller="parentController">
    <div ng-repeat="ctrlId in ['first', 'second']" ng-include='"List.html"'></div>
</div>

---

更好的方法是将模板转换为组件。好的做法是根本不使用独立的控制器。使用时，它们接受绑定形式的参数

这里有一个示例用法：

angular
.module（'exampleApp'，[]）
.run（$rootScope=>{
$rootScope.productSetA=[{
姓名：“富”
},
{
名称：“酒吧”
},
{
名称：“Baz”
}
];
$rootScope.productSetB=[{
名称：“Fiz”
},
{
名字：“福兹”
},
{
名称：“Fez”
}
];
$rootScope.productSetC=[{
名字：“豪饮”
},
{
名字：“比兹”
},
{
名称：“嘟嘟”
}
];
})
.component（'productList'{
绑定：{products:'好的做法是根本不使用独立控制器。使用，它们接受绑定形式的参数

这里有一个示例用法：


angular
.module（'exampleApp'，[]）
.run（$rootScope=>{
$rootScope.productSetA=[{
姓名：“富”
},
{
名称：“酒吧”
},
{
名称：“Baz”
}
];
$rootScope.productSetB=[{
名称：“Fiz”
},
{
名字：“福兹”
},
{
名称：“Fez”
}
];
$rootScope.productSetC=[{
名字：“豪饮”
},
{
名字：“比兹”
},
{
名称：“嘟嘟”
}
];
})
.component（'productList'{
绑定：{products:'良好做法是根本不使用独立控制器。使用。良好做法是根本不使用独立控制器。使用。所有
都在同一范围内，因此所有控制器都将接收相同的值。所有
都在同一范围内，因此所有控制器都将接收相同的值。非常感谢大家。开始吧ed钻研组件，这真的打开了一个全新的世界！非常感谢你们所有人。开始钻研组件，这真的打开了一个全新的世界！
angular.module("app").controller('listController', function($scope) {
  $scope.ctrlNo=0;
  let $scope.elements = []; 
  $scope.$on('setElementsEvent', function(event, data) {
   if($scope.ctrlNo===1){//Here you stop the propagation to do the specific actions for the specific controller
       $scope.elements = data; 
   }
  });
});

<div ng-controller="parentController">
    <div ng-repeat="ctrlId in ['first', 'second']" ng-include='"List.html"'></div>
</div>