嵌套指令和父范围

Question

我的问题可以在http://jsfiddle.net/miketheanimal/2CcYp/13/ 看到，这将我的问题降到最低。

我有一个控制器“main”，一个指令“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 将这些嵌套为主 -> 外部 -> 内部。指令中的控制器函数将它们的 parent 范围名称（即 *$scope.$parent._name）复制到呈现的 HTML 中（抱歉直接操作 DOM，这是最简单的显示方式名字！）。

我希望 outer 显示来自控制器的名称（即“main”），我希望 inner 显示名称from outer（即“outer”），它不是，而是显示“main”。

问题实际上表现出来，因为在实际代码中，我想在 inner 和 outer 范围之间进行绑定，但是 inner最终绑定到 main 范围。

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

瞧！它有效。