我想访问一个父指令的范围,但我似乎无法获得正确的设置组合。这是可能的,它是正确的方法吗?
我真的想避免在MyCtrl中加入类似SOME_CONST(这将有助于我通过控制流更新DOM)
<div ng-controller="MyCtrl"> <parent> <child></child> </parent> </div> var myApp = angular.module('myApp',[]); function MyCtrl($scope) { $scope.obj = {prop:'foo'}; } myApp.directive('parent',function() { return { scope: true,transclude: true,restrict: 'EA',template: '<div ng-transclude><h1>I\'m parent {{obj.prop}}<h1></div>',link: function(scope,elem,attrs) { scope.SOME_CONST = 'someConst'; } } }); myApp.directive('child',function() { return { restrict: 'EA',template: '<h1>I\'m child.... I want to access my parent\'s stuff,but I can\'t. I can access MyCtrlScope though,see <b>{{obj.prop}}</b></h1> how can I access the <b>SOME_CONST</b> value in my parent\'s link function? is this even a good idea? {{SOME_CONST}}. I really don\'t want to put everything inside the MyCtrl',} });
请看这fiddle
谢谢
使用transclude:true和scope:true,parent指令创建两个新范围:
范围004是范围:true的结果,范围005是transclude:true的结果。由于child指令不创建一个新的范围,它使用转录的范围005.从图中可以看出,没有从范围005到范围004的路径(除了通过私有属性$$ prevSibling,这是在相反的方向$$ nextSibling – 但不要使用那些。)
@ joakimbl的解决方案可能是最好的,虽然我认为更常见的是在父指令的控制器上定义一个API,而不是定义属性:
controller: function($scope) { $scope.SOME_CONST = 'someConst'; this.getConst = function() { return $scope.SOME_CONST; } }
然后在child指令中:
link:function(scope,element,attrs,parentCtrl){ scope.SOME_CONST = parentCtrl.getConst(); },
这是标签和窗格指令如何在Angular的主页上工作(“创建组件”示例)。