Question

我有以下指令：

 function outer() {
    return {
        restrict: "A",
        transclude: true,
        scope: {
        },
        controller: function ($scope, $element, $attrs) {

            $scope.thing = $attrs.thing;
        },
        template: '<div>Outer says {{::thing}} <div ng-transclude></div></div>',
        replace: true
    };
}

    function inner() {
        return {
        require: "^outer",
        restrict: "A",
        transclude: true,
        scope: {
            thing: "@"
        },
        link: function (scope, element, attrs, outerCtrl) {
          console.log(scope); //thing is undefined here  

        },
        template: '<div>inner says {{::thing}}</div>',
        replace: true
    };
}

angular
    .module('myapp',[])
    .directive('outer', outer)
    .directive('inner', inner);

与以下html配对：

<div ng-app="myapp">
 <div data-outer data-thing="hi">
   <div data-inner>fff</div>
 </div>

问题是我的内部指令没有从父作用域接收到thing属性。父作用域正确分配了“hi”值，但子项未收到它。

cancel

为什么会这样？

Answer 1

实际上，当您为内部指令创建隔离范围时，您有两个范围才能访问外部范围。

您可以通过以下方式访问它：

template: '<div>inner says {{::$parent.$parent.thing}}</div>'

为什么child指令没有得到正确的范围

1 个答案: