2

So I know when defining scope in a directive, '@' means string and '=' means two-way binding. What does '&' mean?

Here would be an example directive:

angular.module('NoteWrangler')
.directive('nwCard', function() {
  return {
    restrict: 'E',
    templateUrl: './templates/directives/nw-card.html',
    scope: {
      header: '@',
      description: '=',
      tweeted: '='
    },
    link: function(scope, element, attrs){
      if(scope.tweeted)
      element.addClass('tweeted');
    }
  };
});
HelpMeStackOverflowMyOnlyHope
  • 4,852
  • 10
  • 32
  • 49

2 Answers2

4

So the &, @, = define how the relationships work together for how the scope isolation should work

@: text representation

=: two-way binding => allows you to manipulate the data

&: is an the manipulation of the parent scope with a value being passed through. Its typically used to pass a parent scope function through to a directive.

& is very difficult to explain in text but this link here walked me through it: https://egghead.io/lessons/angularjs-isolate-scope-expression-binding

mikeswright49
  • 3,381
  • 19
  • 22
2

Simply speaking, & is to pass in a function or handler to a directive. A good start point is the AngularJS Developer Guide.

Here is a very basic example (JSFiddle):

angular.module('Joy', [])
    .controller('MyCtrl', ['$scope', function ($scope) {
        $scope.addition = function (v1, v2) {
            console.log(v1, v2);
            return v1 + v2;
        };
}])
    .directive('passMeContrller', [function () {
    return {
        restrict: 'A',
        scope: {
            add: '&',
        },
        template: '<div>{{ add({v1: 2, v2: 4}) }}</div>'
    };
}]);

HTML is:

<div ng-app="Joy" ng-controller="MyCtrl">
    <div pass-me-contrller add="addition(v1, v2)"></div>
    <hr>
</div>

Please noted that in the directive template, the function parameters should be {v1: 2, v2: 4}. It is an object, which will be decoded by Angular and passed to the controllers addition function.

For your reference: Pass callback function to directive

Community
  • 1
  • 1
Joy
  • 9,430
  • 11
  • 44
  • 95
  • I'm a little confused by '{v1: 2, v2: 4}'. Is this just to set a default value of the output? When I do "template: '
    {{ add() }}
    '" the directive seems to run fine if I go "
    " with real numbers     – HelpMeStackOverflowMyOnlyHope Jul 21 '15 at 01:24
  • Yes, you are right. Here `{v1: 2, v2: 4}` corresponds to the two arguments of the function `addition`. Of course `addition(1, 2)` runs well, but in this case there is no interaction between the directive and the outside controller. The example here shows that you can pass in parameters **inside** the directive. – Joy Jul 21 '15 at 01:48
  • Ah ok. Thank you very much for the clarification. So in my directive I could have a separate controller, that calculates something and adds it to the directives isolate scope, and then pass that to the function that was passed in by the parent. Here is an example for others: http://jsfiddle.net/9L07epkv/5/ – HelpMeStackOverflowMyOnlyHope Jul 21 '15 at 01:58
  • What does it mean if you do something like "scope: {add: '&add'}"? Doing '&add' forces that the value passed in be a function named 'add'? I saw text being put after the scope character in an example that I haven't seen before... – HelpMeStackOverflowMyOnlyHope Jul 21 '15 at 02:41
  • Check https://docs.angularjs.org/guide/directive. Say, if you use **`&myAdd`**, the HTML should become `
    `: http://jsfiddle.net/9L07epkv/7/     – Joy Jul 21 '15 at 02:51