5

我遇到的问题可以在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 将它们嵌套为主 -> 外部 -> 内部。指令中的控制器函数将其父作用域名称（即 *$scope.$parent._name）复制到呈现的 HTML 中（抱歉直接操作 DOM，这是显示名称的最简单方法！）。

我希望外部显示来自控制器的名称（即“main”），它是，我希望内部显示来自外部的名称（即，“外部”），而不是，相反，它也显示“主要”。

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

4

1 回答 1

9

实际上，这不是错误，而是所需的行为。从服务文档$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;
        }]
    }
});

瞧！有用。

于 2013-09-26T11:44:41.187 回答