Here is my script:
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";
}])
and the html:
<body ng-app="MyApp">
<my-salutation ng-controller="SalutationController">
<strong>{{target}}</strong>
</my-salutation>
</body>
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) 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) 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
});
};
}
};
})
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
});
}
};
})
To have the same scope for the directive, and the controller, you can invoke the transcludeFn manually:
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";
}]);
You can see that '003' is logged out every time, and your code works as expected with this minor adjustment.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.