Angularjs将2个指令范围模型绑定到父控制器模型

时间:2013-10-22 09:13:22

标签: javascript angularjs angularjs-directive

我有一个带有2个对象模型的表单控制器model1:{name:“foo”} model2:{name:“model2”} 我创建了2个指令(两个都创建了隔离的范围)。一个使用Element only绑定,使用model1,另一个使用Attribute only绑定,使用model2。

嵌套就像这样:

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

attribute only指令没有模板,tag指令有模板。

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

1 。有人可以看到问题并在plnkr中解释一下吗?

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


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

2 。影响范围继承的ng-transclude如何? 3 。我是否只使用没有任何标记的业务逻辑创建此属性?

1 个答案:

答案 0 :(得分: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

的范围继承链