概述

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>

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

父组件有一个触发editMode的按钮。

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

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

谢谢，

Answer 1

概述

$broadcast：将事件name向下调度到所有通知已注册$rootScope.Scope听众的子范围（及其子级）......它涓滴下来发布事件的功能。使用$broadcast创建了对$ rootScope的依赖关系。如果我选择不使用$ rootScope，那么我的控制器必须理解$ scope层次结构并能够相应地$broadcast。这是它的有趣部分...尝试测试！基于事件的方法可能会非常混乱，无法跟踪，维护和调试。它使它非常异步，没有真正简单的方法来跟踪应用程序的流程

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

Answer 2

理论上，广播只应用于应用程序范围的事件。想象一下登录/注销通知，websockets事件......等等。

如果你开始为小型活动使用广播，你的应用程序中到处都会有大量的活动，你不会知道哪一个是由什么引发的。

如果您的应用程序足够小并且仅包含父组件和子事件，其中主事件要切换编辑模式布尔值，则可以使用广播。

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

您使用父/子层次结构的事实意味着您可以使用require。通过要求每个子组件中的父组件，您可以自动使用其属性。通过这种方式，您可以传递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>

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

2 个答案:

概述