ネストされたディレクティブと親スコープ

Question

私が抱えている問題はhttp://jsfiddle.net/miketheanimal/2CcYp/13/で確認できます。これは問題を最小限に抑えます。

私はコントローラー "main"と、transcludeの "outer"と、そうでないディレクティブ "inner"を持っています。各ディレクティブには、分離スコープとコントローラがあります。メインとディレクティブのコントローラは$ scope._name = '...'を設定しているので、それらを分けることができます。

var module = angular.module('miketa', []); 
function main ($scope) { 
    $scope._name = 'main' ; 
} ; 
module.directive('outer', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     transclude: true, 
     scope: {}, 
     template: '<div><div ng-transclude></div></div>', 
     controller: [ '$scope', function($scope) { 
      $scope._name = 'outer' ; 
      document.getElementById('opn').innerHTML = $scope.$parent._name ; 
     }]}}); 
module.directive('inner', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: {}, 
     template: '<div></div>', 
     controller: [ '$scope', function($scope) { 
      $scope._name = 'inner' ; 
      document.getElementById('ipn').innerHTML = $scope.$parent._name ; 
     }]}}); 

HTMLはこれらをメイン→外側→内側にネストします。ディレクティブのコントローラ関数は、親のスコープ名（つまり、* $ scope。$ parent._name）をレンダリングされたHTMLにコピーします（DOMを直接操作するための謝辞、それは名前を表示する最も簡単な方法でした）。

私はないです、と私は外（すなわちから名前を表示するようにインナーを期待コントローラ（すなわち、「メイン」）から名前を表示するように外を期待します。」アウター "）、これはそうではなく、むしろ"メイン "も示​​す。

問題は、実際に本物のコードであるため現れ、Iは内側と外側スコープとの間に結合したいが、内側はメイン範囲に結合してしまいます。

Answer 1

実際、これはバグではなく、望ましい動作です。 docs on the $compile serviceから：

典型的なセットアップでウィジェットが分離株のスコープを作成しますが、 トランスクルーは子供ではなく、分離株スコープの兄弟。この は、ウィジェットがプライベート状態を持ち、 転置を親（事前分離）スコープにバインドすることを可能にします。

も参照してください：Why ng-transclude's scope is not a child of its directive's scope - if the directive has an isolated scope?

あなたは本当にそれがng-transcludeを忘れて行う仕事を取得する必要がある場合：

var module = angular.module('miketa', []); 

function main($scope) { 
    $scope._name = 'main'; 
}; 
module.directive('outer', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: {}, 
     template: '<div><inner></inner></div>', 
     controller: ['$scope', function ($scope) { 
      $scope._name = 'outer'; 
      document.getElementById('opn').innerHTML = $scope.$parent._name; 
     }] 
    } 
}); 
module.directive('inner', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: {}, 
     template: '<div></div>', 
     controller: ['$scope', function ($scope) { 
      $scope._name = 'inner'; 
      document.getElementById('ipn').innerHTML = $scope.$parent._name; 
     }] 
    } 
}); 

出来上がり！できます。