Angularjs Binding 2 指令范围模型到父控制器模型答案

【问题标题】：Angularjs Binding 2 directives scope models to a parent controllers modelsAngularjs Binding 2 指令范围模型到父控制器模型
【发布时间】：2013-10-22 09:13:22
【问题描述】：

我有一个带有 2 个对象模型 model1:{name:"foo"} model2:{name:"model2"} 的表单控制器我创建了 2 个指令（都创建了隔离范围）。一个带有仅使用模型1 的元素绑定，另一个带有仅使用模型2 的属性绑定。

嵌套是这样的：

 <div myattibute="model2">
   <mytag my-model="model"></mytag>
 </div>

attribute only 指令没有模板，而 tag 指令有模板。

问题是我在模型的 mytag 指令中未定义。

1。有人能看到问题并在 plnkr 中解释吗？

http://plnkr.co/edit/Q23XqY?p=preview

部分解决方案： 一个工作示例添加了一个空的 div 模板，只为 myattribute 指令添加了 ng-transclude 使其工作。我要求这个属性指令在一个 div 上，我希望它可以放在任何 div、span 等上。这是工作示例： http://plnkr.co/edit/z0M5ys?p=preview

2.ng-transclude 是如何影响范围继承的？
3.我不能只用业务逻辑而不用任何标记来创建这个属性吗？ p>

【问题讨论】：

标签： javascript angularjs angularjs-directive

【解决方案1】：

最好避免使用孤立的作用域，除非在极少数情况下它们会增加不必要的复杂性。使用 $scope.$watch 绑定到属性中的表达式要简单得多，如下所示：

$scope.$watch(attrs.myModel, function(newValue, oldValue) {})

$scope.$watch(attrs.myattribute, function(newValue, oldValue) {})

这样，您的指令可以共享声明它们的父作用域并使用 $watch 表达式处理对其的绑定，或者如果需要，它们可以使用{ scope: true } 创建子作用域。

这是一种可能的解决方案：http://plnkr.co/edit/mm2q67?p=preview

请记住，如果您真的想这样做，您的 myTag 指令可以使用隔离范围，但 myattribute 不能，因为那样会破坏myTag 的作用域继承链

【讨论】：

有趣的地方。我想要实现的是分层组件。例如，一个组件只能包含其内部其他组件的布局信息，而属性用于额外的业务 UI 逻辑而无需呈现。你认为你的模型适合吗？（因为如您所见，即使在一个简单的示例中，我也遇到了一些与 '=' 绑定有关的问题）
您绝对不需要隔离范围。 Angular 核心几乎从不在任何地方使用它们。并不是说你永远不会想要它们，但通常没有必要。看看指令控制器是如何工作的。您可以拥有一个根控制器，您的“子”指令也可以具有引用并与根进行交互。 ngForm 和 ngModel 指令执行此操作。
哦，您还应该考虑到您的指令应该通常主要是表示逻辑，而业务逻辑应该存在于服务中。指令当然可以免费使用这些服务。