Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to pass data from the isolate scope to the parent scope?

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!

like image 439
phoffman Avatar asked Oct 26 '12 18:10

phoffman


People also ask

How do you transfer data from one directive to another?

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.

How do I get parent scope in directive?

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.

What is isolated scope?

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() {

What is scope parent?

$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.


1 Answers

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.

like image 98
Gloopy Avatar answered Nov 14 '22 23:11

Gloopy