CODEWITHSUNDEEP
angularjs
Cheeso
Cheeso

Reputation: 192577

In angular.js, what does an ampersand in the directive mean?

In this code:

app.directive( 'myCustomDirective', function() {
  return {
    restrict: 'EA',
    scope: { value: '=myCustomDirective', clickable: '&', editing: '=' },
    template: '<span ng-click="handleClick()" ng-bind="value"></span>',
    ...

What does clickable: '&' denote?

When I do find Angular documentation, I cannot understand it. It seems to be written in a catch-22 code that can be understood only by people who already understand what is being explained.

For example, I found this video, which apparently explains the & thing, but he may as well have been speaking Mandarin.

Upvotes: 29

Views: 19115

Answers (3)

Bastien Caudan
Bastien Caudan

Reputation: 4490

Update: The new directive API is here

There is some more explanations on the Understanding Scopes doc, and they provide this useful link.

When I wanted to understand this stuff, I made a Fiddle. 

angular.module('scopePropertiesModule', [])
  .directive('scopeProps', function(){
    return {
      restrict: 'C',
      scope: {parameterTitle:'@', 
              bidirecTitle:'=',
              delegateDisplay:'&'},
      template: '<div>' +
                  'Parameter title :<br>' + 
                  '<input ng-model="parameterTitle"> => {{parameterTitle}}<br>'+
                  '<br>' +
                  'Biderectional title :<br>' +
                  '<input ng-model="bidirecTitle"> => {{bidirecTitle}}<br>' + 
                  '<br>' +
                  'Delegate display :<br>' +
                  '{{delegateDisplay()}}<br>' + 
                  '</div>'  
    }
});

and the markup:

<div class="scopeProps"
     parameter-title="{{title}}" 
     bidirec-title="title"
     delegate-display="displayTitle()"></div>

Feel free to play with it.

Upvotes: 13

remigio
remigio

Reputation: 4211

It means that when referring to the clickable variable in the directive scope, Angular evaluates the associated expression in the parent scope and assigns the result to the variable. For example, if you include the directive in your HTML code this way:

<my-custom-directive ... clickable='initialized && i > 0' ...>

Angular will calculate the initialized && i > 0 expression in the context of the page controller scope and assign the result to the clickable variable in the directive scope. This will be done dynamically, the directive variable is updated every time the expression value changes.

Upvotes: 7

nowk
nowk

Reputation: 33181

http://docs.angularjs.org/guide/directive (quick search for "scope")

From the 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. Often it's desirable to pass data from the isolated scope via an expression and to the parent scope, this can be done by passing a map of local variable names and values into the expression wrapper fn. For example, if the expression is increment(amount) then we can specify the amount value by calling the localFn as localFn({amount: 22}).

Upvotes: 10

Related Questions