AngularJS：ng-controller on指令不适用于指令中的transcluded元素

Question

这是我的脚本：

angular.module('MyApp',[])
.directive('mySalutation',function(){
    return {
        restrict:'E',
        scope:true,
        replace:true,
        transclude:true,
        template:'<div>Hello<div ng-transclude></div></div>',
        link:function($scope,$element,$attrs){
        }
    };
})
.controller('SalutationController',['$scope',function($scope){
    $scope.target = "StackOverflow";
}])

和HTML：

<body ng-app="MyApp">
    <my-salutation ng-controller="SalutationController">
        <strong>{{target}}</strong>        
    </my-salutation>
</body>

问题是，当SalutationController应用于my-salutation指令时， $scope.target对于$scope.target 是不可见的。但是如果我将ng-controller放在<body>或<strong>元素上，它就可以工作。 正如文档所说， ng-controller创造了新的范围。

谁能解释一下，在这种情况下，指令的范围和范围如何相互干扰？
如何将控制器置于指令上？ 任何提示将不胜感激。

Answer 1

1）问题是ng-transclude的范围是你的指令的兄弟范围。 将ng-controller放入父元素时， ng-controller创建的范围是指令和ng-transclude父范围。 由于范围继承，transcluded元素能够正确绑定{{target}} 。

2）您可以使用自定义转换来自己绑定范围

.directive('mySalutation',function(){
    return {
        restrict:'E',
        scope:true,
        replace:true,
        transclude:true,
        template:'<div>Hello<div class="transclude"></div></div>',
        compile: function (element, attr, linker) {
            return function (scope, element, attr) {
                linker(scope, function(clone){
                       element.find(".transclude").append(clone); // add to DOM
                });

            };
        }
    };
})

DEMO

或者在链接函数中使用transclude函数：

.directive('mySalutation',function(){
    return {
        restrict:'E',
        scope:true,
        replace:true,
        transclude:true,
        template:'<div>Hello<div class="transclude"></div></div>',
        link: function (scope, element, attr,controller, linker) {
           linker(scope, function(clone){
                  element.find(".transclude").append(clone); // add to DOM
           });
        }
    };
})

DEMO

Answer 2

要使指令和控制器具有相同的范围，可以手动调用transcludeFn：

angular.module('MyApp',[])
.directive('mySalutation',function(){
    return {
        restrict:'E',
        scope:true,
        replace:true,
        transclude:true,
        template:'<div>Hello<div class="trans"></div></div>',
        link:function(scope, tElement, iAttrs, controller, transcludeFn){
                console.log(scope.$id);
                transcludeFn(scope, function cloneConnectFn(cElement) {
                    tElement.after(cElement);
                }); 
        }
    };
})
.controller('SalutationController',['$scope',function($scope){
    console.log($scope.$id);
    $scope.target = "StackOverflow";
}]);

普拉克

您可以看到每次都会注销“003”，并且您的代码可以通过此次调整按预期工作。

AngularJS：ng-controller on指令不适用于指令中的transcluded元素

问题描述

2 个解决方案

解决方案1
9 已采纳 2014-03-22 09:11:31

解决方案2
2 2014-03-22 09:16:40

AngularJS：ng-controller on指令不适用于指令中的transcluded元素

问题描述

2 个解决方案

解决方案1 9 已采纳 2014-03-22 09:11:31

解决方案2 2 2014-03-22 09:16:40

解决方案1
9 已采纳 2014-03-22 09:11:31

解决方案2
2 2014-03-22 09:16:40