I am fairly new to using AngularJS, and what I am trying to do is create a directive and call functions from the parent scope within it. I am able to accomplish this, but what I can't seem to figure out is how to pass data from the isolate scope via an expression to the parent scope. The explanation of this in the Angular Developer guide is a little confusing.
The directive:
app.directive('myDir', function() {
return {
restrict: 'E',
template: '<div ng-click="parentFunc(someValue)"><div>',
scope: {
parentProp: '=property',
parentFunc: '&func'
},
link: function(scope, element, attrs) {
}
}
});
The markup:
<my-dir prop="foo" func="bar(someValue)"></my-dir>
The controller:
app.controller('TstCtrl', function($scope) {
$scope.foo = 'test';
$scope.bar = function(value) {
console.log(value);
};
});
Thanks in advance for the help!
The best way to pass an object to an angular directive is by using the &. When you use &, angular compiles the string as an expression and sets the scope variable in your directive to a function that, when called, will evaluate the expression in the context of the directive's parent's scope.
The directive scope uses prefixes to achieve that. Using prefixes helps establish a two-way or one-way binding between parent and directive scopes, and also make calls to parent scope methods. To access any data in the parent scope requires passing the data at two places – the directive scope and the directive tag.
Isolated scope directive is a scope that does not inherit from the parent and exist on its own. Scenario: Lets create a very simple directive which will show the object from the parent controller. var demoApp = angular.module('demoApp', []); demoApp.directive('myDirective', function() {
$rootScope is a parent object of all “$scope” angular objects created in a webpage. $scope is a child object that is used to bind the HTML(view) & Javascript(Controller) in a webpage. It is created with the ng-app directive. It is created with the ng-controller directive.
There may be other ways to do this but see this fiddle where you would pass in an object to the function using the same parameter names passed into your func
attribute.
link: function(scope, element, attrs) {
scope.parentFunc({someValue:'testing'});
}
So in this case since you called bar(someValue)
in your func
attribute you would want to pass in an object with someValue
in your link function. You're calling parentFunc
because that's what &func
is linked to in your isolate scope.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With