javascript - 将数据发送到 AngularJs 中的特定 Controller

Question

我想知道 AngularJs 中是否有针对以下情况的良好实践解决方案:

我有一个 html，它基本上显示元素列表和一个 Controller ，它是 View 模型并处理该列表的某些事件。我在我的应用程序中的不同位置使用这个 html/ Controller 组合使用 ng-include。

List.html:

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

现在我一直在使用父作用域中的事件来用元素填充列表 Controller 。

ListController.js

angular.module("app").controller('listController', function($scope) {
  let $scope.elements = []; 
  $scope.$on('setElementsEvent', function(event, data) {
    $scope.elements = data; 
  });
});

到目前为止，这一切运行良好。但现在我遇到的情况是，一个父 Controller 有多个这些列表作为子项，但我希望它们显示不同的元素。对于广播事件，我总是会为所有子列表设置元素!使用工厂会带来同样的问题，因为所有 listController 都具有相同的 Controller 功能。

parent.html

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

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

有没有一种方法可以完成此任务，而无需为我想要显示的每个列表编写新的 Controller ？

Answer 1

好的做法是根本不使用独立 Controller 。使用components ，它们接受绑定(bind)形式的参数。

这里有一个示例用法:

angular
  .module('exampleApp', [])
  .run($rootScope => {
    $rootScope.productSetA = [{
        name: 'Foo'
      },
      {
        name: 'Bar'
      },
      {
        name: 'Baz'
      }
    ];

    $rootScope.productSetB = [{
        name: 'Fiz'
      },
      {
        name: 'Fooz'
      },
      {
        name: 'Fez'
      }
    ];

    $rootScope.productSetC = [{
        name: 'Booze'
      },
      {
        name: 'Beeze'
      },
      {
        name: 'Beep'
      }
    ];
  })
  .component('productList', {
    bindings: {products: '<'},
    template: '<div ng-repeat="product in $ctrl.products" ng-bind="product.name">'
  });

product-list {
  display: block;
  background-color: tomato;
  margin: 5px;
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>

<div ng-app='exampleApp'>
  <product-list products='productSetA'></product-list>
  <product-list products='productSetB'></product-list>
  <product-list products='productSetC'></product-list>
</div>