我的指令设置如下:
<div data-directive-a data-value="#33ff33" data-checked="true"> <div data-directive-b></div> </div>
>我正在使用transclusion来确保directiveB被渲染.
> directiveA有一个复选框,这意味着每当检查时更改一些值.
>该值需要在指令A和指令B的范围内访问.
我已经设法做到这一点,但只有通过引用$$prevSibling – 有更好的方法吗?
以下是代码:http://jsfiddle.net/janeklb/yugQf/(在此示例中,单击该复选框仅用于“清除”值)
–
更深入:
指令A(正在转录到其中)的“内容”并不总是指示B.其他指令B类的指令也将在那里结束.在指令A中将始终使用directiveB“类型”.
为了避免将组件耦合得太多,我将避免使用$$prevSibling.最好的解决方案,因为你的directiveB类组件预计在directiveA组件中使用是使用require.
.directive( 'directiveB',function () { return { require: '^directiveA',scope: true,link: function ( scope,element,attrs,directiveA ) { scope.obj = directiveA.getObj(); } }; })
^ require表示此指令的元素某处或DOM层次结构中的任何元素都是一个directiveA指令,我们想在其控制器上调用方法.
.directive( 'directiveA',function () { return { // ... controller: function ( $scope ) { // ... this.getObj = function () { return $scope.obj; }; } }; })
所以现在在directiveB中,你可以使用ng-model =“obj.attr”.
这有很多变化,但考虑到这个问题是多么的普遍,我觉得这是最好的办法.这是一个更新的小提琴:http://jsfiddle.net/yugQf/7/.