嵌套指令和父作用域

Question

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

我有一个控制器"main",一个指令"外部"转换's,一个指令"内部"没有.每个指令都有一个隔离范围和一个控制器.主要和指令控制器设置$ 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

事实上,它不是一个错误,它是理想的行为.从服务的文档$compile:

在典型的设置中,窗口小部件创建隔离范围,但是转换不是子项,而是隔离范围的兄弟.这使得窗口小部件可以具有私有状态,并且将转换绑定到父(预隔离)范围.

另请参阅:为什么ng-transclude的范围不是其指令范围的子代 - 如果指令具有隔离范围？

如果你真的需要让它工作忘记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;
        }]
    }
});

瞧!有用.