在Transcluded Directive中访问父范围

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

请看这个小提琴

谢谢

Answer 1

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

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

@ joakimbl的解决方案在这里可能是最好的,虽然我认为在父指令的控制器上定义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的主页上的工作方式("创建组件"示例).

Answer 2

通常,您在指令中访问父作用域变量的方式是通过双向绑定(scope:{model:'=model'}- 请参阅指令配置中的指令角度指南),但由于您使用的是转换,因此不是那么简单.如果child指令始终是父指令的子指令,则可以将其配置为需要父指令,然后在子链接函数中访问父控制器:

myApp.directive('parent', function() {
  return {
    scope: true,
    transclude: true,
    restrict: 'EA',
    template: '<div ng-transclude><h1>I\'m parent {{obj.prop}}<h1></div>',
    controller: function($scope) {
        $scope.SOME_CONST = 'someConst';
        this.SOME_CONST = $scope.SOME_CONST;
    }
  }
});

myApp.directive('child', function() {
  return {
    restrict: 'EA',
    require:'^parent',
    scope:true,
    link:function(scope,element,attrs,parentCtrl){
        scope.SOME_CONST = parentCtrl.SOME_CONST;
    },
    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',
  }
});

请参阅此更新:http://jsfiddle.net/uN2uv/

Answer 3

我只是遇到了同样的问题,最后用角度手册解决了;)

总之:您需要使用控制器中的父指令,并要求该控制器在您的孩子的指令.这样您就可以获得父属性.

请参阅https://docs.angularjs.org/guide/directive 章节:创建通信指令

我改变你的小提琴使用控制器,现在你可以访问你的常量:https: //jsfiddle.net/bbrqdmt3/1/

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>',
        controller: function($scope) {
            this.getConst= function() {
                return 'someConst';
            }                        
        },
    }
});

myApp.directive('child', function() {
    return {
        restrict: 'EA',
        require : '^parent',
        link: function(scope, element, attrs, ctrl) {
            scope.value= ctrl.getConst();
        },
        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? {{value}}.  I really don\'t want to put everything inside the MyCtrl',
    }
});