2015-10-15 158 views
0

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

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/

這是爲什麼?

+0

你有沒有嘗試這個辦法:

你可以訪問它。範圍:{ thing:「=」 }, –

+0

是的,這不起作用 - 請參閱https://jsfiddle.net/qbge5qse/47/ –

回答

0

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

template: '<div>inner says {{::$parent.$parent.thing}}</div>' 
相關問題