Directive isolated scope with transcluded HTML
Question
I am running into some issue regarding isolated scopes. I have a directive which i need to use at many places and its controller has some helper functions for the directive. The directive does create isolated scopes but the template refers to the parent scope. Below is a plunk to demo that issue
http://plnkr.co/edit/LQnlSjMHeatMkmkYZyfk
$scope.text = "test";
is to demo that the property does not change in the isolated scope and refers to the parent scope. Due to this issue i am unable to call the helper functions for each isolated scope. I hope I am able to describe my problem properly.
Below is the code
HTML:
<body ng-controller="MainCtrl">
<div transfer-box style="">
{{text}}
<div ng-if="refresh" ></div>
{{refresh}}
</div>
<div transfer-box style="">
{{text}}
<div ng-if="refresh" ></div>
{{refresh}}
</div>
</body>
Javascript:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.text = 'World';
console.log("parent scope id "+ $scope.$id);
});
app.directive('transferBox', function() {
return {
restrict: 'EA',
xreplace: true,
transclude: true,
scope:true,
template: '<div class="container-fluid" style="height:100%" ng-transclude></div>',
controller:'transferBoxCtrl'
};
})
app.controller('transferBoxCtrl',['$scope',function($scope){
console.log($scope.$id);
$scope.refresh = true;
$scope.text = "test";
}])
3 answers
solution1
1 2015-07-16 13:35:23
You haven't created an isolate scope. You need to pass an object to the scope property like this for example:
app.directive('transferBox', function() {
return {
restrict: 'EA',
xreplace: true,
transclude: true,
// create an isolate scope
scope:{
text: '=?'
},
template: '<h1>{{text}}</div>',
// define directive controller within the directive definition
controller: function($scope){
$scope.text = $scope.text || 'default'
}
};
});
index.html
<body ng-controller="MainCtrl">
<div transfer-box text="text" ></div>
<div transfer-box ></div>
</body>
Notice, also, that the controller is defined within he directive definition so no need for any calls to app.controller() .
Read the docs regarding the 'Directive Definition Object' for more details on how to define an isolate scope.
DEMO - shows a modified version of your code showing how you might implement an isolate scope shared between directive and parent controller.
solution2
0 2015-07-16 14:05:22
This is not possible because angular load child first, here transfer-box directive is a child and then MainCtrl controller which is parent.
So child variable always get replaced by parent.
Solution provided by Matt Herbstritt is great.
Thank you
solution3
0 ACCPTED 2015-07-17 03:20:35
The issue was with transcluded HTML. I found a link with exactly the same description about the issue I am facing. I will give it a try but just posting it for others reference.
http://angular-tips.com/blog/2014/03/transclusion-and-scopes/
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.