angularjs – 在Transcluded指令中访问父级作用域

前端之家收集整理的这篇文章主要介绍了angularjs – 在Transcluded指令中访问父级作用域前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想访问一个父指令的范围,但我似乎无法获得正确的设置组合。这是可能的,它是正确的方法吗?

我真的想避免在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的主页上工作(“创建组件”示例)。

猜你在找的Angularjs相关文章