哪个更适合模式？广播与绑定？

Question

我目前有一个父组件和几个子组件。

<parent-component>
   <child-component ng-data="$ctrl.object.fieldone"></child-component>
   <child-component ng-data="$ctrl.object.fieldtwo"></child-component>
   ...
   <button ng-click='$ctrl.setEdit();">Edit</button>
</parent-component>

每个子组件将：使用代表视图模式的一系列 divs/spans 显示数据，或使用代表编辑模式的表单元素显示数据。

父组件有一个触发编辑模式的按钮。

通知子组件状态为编辑模式的最佳方式是什么？似乎有很多不同的方式来传递这种状态：父级可以广播或者父级的 editMode 变量可以绑定到子组件。除了这两个，还有更好的方法吗？

假设有超过 20-30 个子组件，并且这些组件将在不同的视图中使用。

谢谢，

Answer 1

概览

$broadcast: 向下分发事件 name 到所有子作用域（及其子作用域），通知已注册的 $rootScope.Scope 侦听器。 ....简单地说，它向下传递函数来发布事件。使用 $broadcast 会创建对 $rootScope.then 的依赖，如果我选择不使用 $rootScope，那么我的控制器必须理解 $scope 层次结构并能够相应地 $broadcast。这是其中有趣的部分......尝试测试一下！基于事件的方法在跟踪、维护和调试方面可能会变得非常混乱。它使它非常异步，没有真正简单的方法来跟踪应用程序的流程

binding: Angular 应用程序中的数据绑定是模型和视图组件之间数据的自动同步。 Angularjs 具有单向和双向数据绑定（请参阅参考资料）这很快让我开始谈论范围，因为在绑定时你必须知道范围层次结构和你能够访问的视图，这是相当简单....

Answer 2

理论上，广播应该只用于应用程序范围的事件。想象一下login/logout 通知、websockets 事件...等等

如果你开始对小事件使用广播，你最终会在你的应用程序中到处都有大量的事件，你将不知道哪个是由什么触发的。

如果您的应用程序足够小并且仅包含一个 parent 组件和 children，其中主要事件是切换版本模式布尔值，那么使用广播就可以了。

对于任何比这更大的东西，你显然可以使用绑定。在您的特定情况下，为您的 30 children.html 元素中的每一个添加一个属性感觉有点沉重。

您使用 parent / children 层次结构意味着您可以使用 require。通过在每个 child 组件中要求 parent，您可以自动使用其属性。这样你就可以传递一个 editMode 变量，如果你将来需要传递更多数据，它是可扩展的。

var parent = {
  controller: ParentController,
  template:`
    <button ng-click="$ctrl.editionMode = !$ctrl.editionMode">Edition</button>
    <br><br>
    <child></child>
  `
}

function ParentController() {
  this.editionMode = false;
}

var child = {
  require: { parent: '^^parent' },
  controller: ChildController,
  template: `
    <input type="text" ng-model="$ctrl.value" ng-if="$ctrl.parent.editionMode">
    <span ng-if="!$ctrl.parent.editionMode">{{$ctrl.value}}</span>
  `
}

function ChildController() {
  this.value = "edit me";
}

angular.module('myApp', []);
angular.module('myApp')
  .component('parent', parent)
  .controller('ParentController', ParentController)
  .component('child', child)
  .controller('ChildController', ChildController);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<div ng-app="myApp">
  <parent></parent>
</div>

哪个更适合模式？广播与绑定？

Which is more appropriate for Modes? Broadcast vs Binding?

angularjs

angularjs-components

概览