访问嵌入指令中的父作用域 [英] Access Parent Scope in Transcluded Directive

问题描述

我想访问父指令的范围，但我似乎无法获得正确的设置组合.这是可能的吗?这是正确的方法吗?

我真的想避免在 MyCtrl 中放置类似 SOME_CONST(这将帮助我通过控制流进行 DOM 更新)之类的内容

<父母><孩子></孩子></父母>
var myApp = angular.module('myApp',[]);函数 MyCtrl($scope) {$scope.obj = {prop:'foo'};}myApp.directive('parent', function() {返回 {范围:真实，转置:真实，限制:'EA'，模板:'<div ng-transclude><h1>I\'m parent {{obj.prop}}<h1></div>',链接:功能(范围，元素，属性){scope.SOME_CONST = 'someConst';}}});myApp.directive('child', function() {返回 {限制:'EA'，模板:'<h1>我是孩子......我想访问我父母的东西，但我不能.不过，我可以访问 MyCtrlScope，参见 <b>{{obj.prop}}</b></h1>我如何访问 <b>SOME_CONST</b>我父母的链接函数中的值?这甚至是个好主意吗?{{SOME_CONST}}.我真的不想把所有东西都放在 MyCtrl 里'，}});

请参阅此小提琴

谢谢

解决方案

使用 transclude: true 和 scope: true，parent 指令创建两个新范围:

Scope 004 是 scope: true 的结果，scope 005 是 transclude: true 的结果.由于 child 指令没有创建新的作用域，它使用了嵌入的作用域 005.从图中可以看出，没有从作用域 005 到作用域 004 的路径(除了通过私有属性 $$prevSibling，这与 $$nextSibling 的方向相反——但不要使用它们.)

@joakimbl 的解决方案在这里可能是最好的，尽管我认为在父指令的控制器上定义 API 更常见，而不是在 this 上定义属性:

控制器:函数($scope){$scope.SOME_CONST = 'someConst';this.getConst = 函数(){返回 $scope.SOME_CONST;}}

然后在 child 指令中:

link:function(scope,element,attrs,parentCtrl){scope.SOME_CONST = parentCtrl.getConst();},

这是 tabs 和 pane 指令在 Angular 主页上的工作方式(创建组件"示例).

I would like to access a parent directive's scope, but I can't seem to get the right combination of settings. Is this possible and is it the right approach?

I really want to avoid putting something like SOME_CONST (which would help me make DOM updates through control flow) in MyCtrl

<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',
    }
});

Please see this fiddle

Thanks

解决方案

With transclude: true and scope: true, the parent directive creates two new scopes:

Scope 004 is a result of scope: true, and scope 005 is a result of transclude: true. Since the child directive does not create a new scope, it uses transcluded scope 005. As you can see from the diagram there is no path from scope 005 to scope 004 (except via private property $$prevSibling, which goes in the opposite direction of $$nextSibling -- but don't use those.)

@joakimbl's solution is probably best here, although I think it is more common to define an API on the parent directive's controller, rather than defining properties on this:

controller: function($scope) {
    $scope.SOME_CONST = 'someConst';
    this.getConst = function() {
       return $scope.SOME_CONST;
    }
}

Then in the child directive:

link:function(scope,element,attrs,parentCtrl){
    scope.SOME_CONST = parentCtrl.getConst();
},

This is how the tabs and pane directives work on Angular's home page ("Create Components" example).

这篇关于访问嵌入指令中的父作用域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！