在AngularJS中模块之间发送数据的正确方法是什么？

Question

angular的一个好处是你可以拥有独立的模块,你可以在不同的地方重用它们.假设您有一个模块可以使用列表进行绘制,排序和执行许多操作.假设此模块将在您的应用程序周围使用.最后,说你想以不同的方式填充它.这是一个例子:

angular.module('list', []).controller('listController', ListController);
var app = angular.module('myapp', ['list']).controller('appController', AppController);

function AppController() {
  this.name = "Misae";
  this.fetch = function() {
    console.log("feching");
    //change ListController list
    //do something else
  }
}

function ListController() {
  this.list = [1, 2, 3];
  this.revert = function() {
    this.list.reverse();
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="app" ng-app="myapp" ng-controller="appController as App">

  <div class="filters">
    Name:
    <input type="text" ng-model="App.name" />
    <button ng-click="App.fetch()">Fetch</button>
  </div>

  <div class="list" ng-controller="listController as List">
    <button ng-click="List.revert()">Revert</button>
    <ul>
      <li ng-repeat="item in List.list">{{item}}</li>
    </ul>
  </div>

</div>

现在,当您单击"获取"按钮时,您将使用$http依此类推将名称(以及其他过滤器和内容)发送到API .然后你会得到一些数据,包括你想要绘制的项目列表.然后,您要将该列表发送List到要绘制的模块.

它必须是这种方式,因为你将在不同的地方使用列表模块,它将始终绘制一个列表并添加一些功能,如重新排序和反转它.虽然过滤器和API连接将发生变化,但您的列表行为不会发生变化,因此必须有2个不同的模块.

也就是说,获取数据后将数据发送到List模块的最佳方法是什么？有服务吗？

Answer 1

您应该使用Angular组件来执行此任务.

您应该创建一个模块,其中包含一个组件,该组件将显示列表并提供一些操作,这些操作将修改列表并告知父级更新值.

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

list.controller('listCtrl', function() {
    this.reverse = function() {
        this.items = [].concat(this.items).reverse();
        this.onUpdate({ newValue: this.items });
    };
});

list.component('list', {
  bindings: {
    items: '<',
    onUpdate: '&'
  },
  controller: 'listCtrl',
  template: '<button ng-click="$ctrl.reverse()">Revert</button><ul><li ng-repeat="item in $ctrl.items">{{ item }}</li></ul>'
});

这样,当您单击"Revert" list组件时,将反转数组并执行on-updateHTML元素属性中提供的功能.

然后,您只需将应用程序设置为依赖于此模块即可

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

并使用list组件

<list data-items="list" data-on-update="updateList(newValue)"></list>

您可以在示例中看到其余代码