angularjs - 嵌入指令中的访问父范围

Question

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

我真的想避免在 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

谢谢

Answer 1

与 transclude: true和 scope: true , parent指令创建两个新范围:


范围 004 是 scope: true 的结果, 范围 005 是 transclude: true 的结果.由于child指令不会创建新的范围，它使用转入的范围 005。从图中可以看出，没有从范围 005 到范围 004 的路径(通过私有(private)属性 $$prevSibling 除外，它与 $$nextSibling 的方向相反- 但不要使用那些。)

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

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

这就是 tabs和 pane指令适用于 Angular 的主页(“创建组件”示例)。