爲什麼孩子指令沒有得到正確的範圍

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」值正確分配，但孩子沒有收到。

https://jsfiddle.net/qbge5qse/47/

這是爲什麼？

Answer 1

實際上，當您爲內部指令創建隔離範圍時，您在訪問外部範圍之前有2個範圍。

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