Using '&' scope vars in Angular directives

Question

From the Angular docs:

& or &attr - provides a way to execute an expression in the context of the parent scope. If no attr name is specified then the attribute name is assumed to be the same as the local name. Given and widget definition of scope: { localFn:'&myAttr' }, then isolate scope property localFn will point to a function wrapper for the count = count + value expression.

This gives me the impression that something like this should be possible, but it isn't working. What am I doing wrong?

myApp.directive('test', function () {
return {
    restrict: 'E',
    replace: true,
    template: '<div><input type="button" ng-click="thefunc()" value="{{title}}"/></div>',
    scope: {
        title: '@',
        thefunc: '&'
    }
};});

HTML:

<test thefunc="alert('Here you go.')" title="Click me for a popup"/>

Fiddle

Shai Reznik - HiRez.io · Accepted Answer · 2013-03-14 19:43:40Z

3

Angular is looking for an "alert" on the controller's scope -

$scope.alert = function(){..}

and not the window.alert

Here is an updated version:

http://jsfiddle.net/3CxtZ/4/

answered Mar 14, 2013 at 19:43

Shai Reznik - HiRez.io

9,0082 gold badges37 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mfelix Over a year ago

Thanks. I guess I was thinking it just eval()s the contents of the &attribute or something, but clearly that's wrong. It's easy to forget how isolated these scopes really are.

Collectives™ on Stack Overflow

Using '&' scope vars in Angular directives

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related