嵌套指令和父範圍

Question

我有的問題可以在http://jsfiddle.net/miketheanimal/2CcYp/13/看到，這可以將我的問題降到最低。

我有一個控制器「主」，一個指令「外」，transclude的和一個指令「內部」，而不是。每個指令都有一個隔離範圍和一個控制器。主控制器和指令控制器設置$ 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把這些嵌套爲main - > outer - > inner。控制器在指令中的作用是將作用域名（例如* $ scope。$ parent._name）的父複製到呈現的HTML中（直接操作DOM的道歉操作，這是顯示名稱的最簡單方法！）。

我期望外來自控制器顯示名稱（即，「主」），這是確實的，我會期望內從顯示名稱外（即，「外部「），這不是，而是顯示」主要「。

這個問題實際上表現由於在實際的代碼，我想在內和外作用域之間結合的，但內最終結合主範圍。

Answer 1

事實上，它不是一個錯誤，它是所需的行爲。從docs on the $compile service：

在典型的設置窗口小部件創建一個分離的範圍，但 transclusion是不是一個孩子，而是分離範圍的兄弟姐妹。這個 可以使小部件具有私有狀態，並且 跨接被綁定到父（預隔離）範圍。

參見：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; 
     }] 
    } 
}); 

瞧！有用。