AngularJS - Пользовательская директива Область «&» делать?

Question

Знаем, что при определении области действия в директиве «@» означает строку и «=» означает двустороннюю привязку. Что означает «&»?

Вот бы пример директивы:

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'); 
    } 
    }; 
}); 

Answer 1

Проще говоря, & должен пройти в function или handler к директиве. Хорошей стартовой точкой является AngularJS Developer Guide.

Вот очень простой пример (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 является:

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

Пожалуйста, отметил, что в шаблоне директивы, параметры функции должны быть {v1: 2, v2: 4}. Это объект, который будет декодирован с помощью углового и передан в функцию контроллеров addition.

Для справки: Pass callback function to directive

Answer 2

Так &, @, = определить как отношения работают вместе для того, как изоляция сфера должна работать

@: текстовое представление

=: двух- двустороннее связывание => позволяет вам манипулировать данными

&: это манипуляция родительской областью с передаваемым значением. Его обычно используют для передачи функции родительской области до директивы.

& очень трудно объяснить в тексте, но эта ссылка здесь провожал через него: https://egghead.io/lessons/angularjs-isolate-scope-expression-binding