AngularJS:指令上的 ng-controller 不适用于指令中的嵌入元素 [英] AngularJS : ng-controller on directive does not work on transcluded elements within directive
问题描述
这里是我的脚本:
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 不可见 用于嵌入元素.但是如果我将 ng-controller 放在 或 元素上，它会起作用.正如 docs 所说，ng-controller 创建了新的作用域.
The problem is , when SalutationController is applied on my-salutation directive, $scope.target is not visible for transcluded element.But if I put ng-controller on <body> or on <strong> element, it works. As docs says, ng-controller creates new scope.
谁能解释一下，在这种情况下，作用域和指令的作用域是如何相互干扰的?
Who can explain, how that scope and the scope of the directive are interfering with each other in this case?
如何将控制器置于指令上?任何提示将不胜感激.
How can I put controller on directive? Any hints will be appreciated.
推荐答案
1) 问题在于 ng-transclude 的作用域是指令的 sibling 作用域.当您将 ng-controller 放在父元素上时，由 ng-controller 创建的范围是指令和 ng-transclude 的父范围>.由于范围继承，被嵌入的元素能够正确绑定{{target}}.
1) The problem is ng-transclude's scope is the sibling scope of your directive. When you put the ng-controller to a parent element, the scope created by ng-controller is parent scope of both your directive and ng-transclude. Due to scope inheritance, the transcluded element is able to bind the {{target}} correctly.
2) 您可以使用自定义嵌入来自己绑定范围
2) You could do that using custom transclusion to bind the scope yourself
.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
});
};
}
};
})
或者在链接函数中使用transclude函数:
Or using the transclude function in the link function:
.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
});
}
};
})
这篇关于AngularJS:指令上的 ng-controller 不适用于指令中的嵌入元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
