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');
}
};
});
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
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
{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.&myAdd, the HTML should become <div pass-me-controller my-add="addition(v1, v2)"></div>: jsfiddle.net/9L07epkv/7