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

Question

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!

score 11 · Accepted Answer · answered Oct 26 '12 at 19:01

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.

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

1 Answers1

Linked