AngularJS: pass object from directive to controller
In my directive, I instantiate an object.
I would like to pass this object to the scope of the controller that I am binding to the directive. How to do it?
Please keep in mind that this is sandboxed code for understanding the problem. In a real problem it won't help to instantiate this object inside the controller.
I know that the scope object in the directive is meant to pass the values specified in HTML, I wrote it this way to help you understand what I am trying to do.
angular.module('test', [])
.controller('test', ['$scope', function($scope) {
alert($scope.obj); //Needs to contain {value: 'bla'}
}])
.directive('pTest', ['$compile', function($compile) {
var object = {value: 'bla'};
return {
scope: {
obj: object //how can I do that?
},
controller: 'test'
};
}]);
You can do this in the referral link function. Since you want to set the value in scope, you can use the scope parameter of the link function. You can also set the object on the controller, since the fourth argument (optional) to the reference function is the controller for the directive.
.directive('pTest', ['$compile', function($compile) {
var object = {value: 'bla'};
return {
controller: 'test',
link: function(scope, elements, attrs, controller) {
scope.obj = object;
// or
controller.obj = object;
}
};
}]);
Now, suppose you don't want to isolate your scope by using the "scope" member in the return of your directive. From your example, I don't think you really need an isolated area. (Regardless, the link feature will work there too.)
source to share
You may have two solutions
Solution 1: uses '=' in isolated scope, bind local / directive scope property to parent scope property.
.directive('ptest', ['$compile', function($compile) {
var object = {value: 'changed value'};
return {
scope: {
iobj:"="
},
template : "<div>{{iobj.value}}<div>",
link: function(scope,elem,attr){
scope.iobj=object ;
}
};
}]);
in html
<div ng-controller="testCtrl">
<div ptest iobj="object"></div>
</div>
Solution 2: use the $ controller service and make testCtrl the parent and copy the whole scope to the controllers scope
.directive('ptest', ['$compile', function($compile,$controller) {
var object = {value: 'changed value'};
return {
controller:function($scope,$controller){
$controller('testCtrl', {$scope: $scope});
console.log($scope.object.value);
$scope.object = object;
}
};
}]);
working example for solving "=" 1:
angular.module('test',[])
.controller('testCtrl',function($scope){
$scope.object = {value:'intial value'};
})
.directive('ptest', ['$compile', function($compile) {
var object = {value: 'changed value'};
return {
//replace:true,
scope: {
iobj:"="
},
template : "<div>{{iobj.value}}<div>",
link: function(scope,elem,attr){
scope.iobj=object ;
}
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="testCtrl">
{{object.value}}
<div ptest iobj="object"></div>
</div>
Working example for solution 2 with $ controller
angular.module('test',[])
.controller('testCtrl',function($scope){
$scope.object = {value:'intial value'};
})
.directive('ptest', ['$compile', function($compile,$controller) {
var object = {value: 'changed value'};
return {
controller:function($scope,$controller){
$controller('testCtrl', {$scope: $scope});
console.log($scope.object.value);
$scope.object = object;
}
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="testCtrl">
{{object.value}}
<div ptest ></div>
</div>
source to share