Директива AngularJS Передача параметров изолированной функции области

Question

Я написал директиву, которая отображает одну кнопку для каждого продукта, переданного в директиву. Продукт также должен быть передан функции subscribe директивы при нажатии кнопки.

Проблема заключается в том, что параметр не передается функции.

директива

directives.directive('subscriptionItem', function() { 
    return { 
     scope: { 
      // Two way binding, = is equivalent to '=activeSubscription' 
      activeSubscription: '=', 
      products: '=', 
      googleLogin: '&', 
      subscribe: '&' 
     }, 
     restrict: 'E', 
     replace: 'true', 
     templateUrl: 'common/directives/subscription-item.tpl.html' 
    }; 
}); 

Шаблон

<div> 
    <ion-item class="item-text-wrap"> 
     <h2>{{activeSubscription.status}} - {{activeSubscription.action}}</h2> 

     <p>{{activeSubscription.description}}</p> 
    </ion-item> 
    <ion-item ng-repeat="product in products" class="item-text-wrap" ng-if="activeSubscription.action === 'PAID'"> 
     <h2>{{product.title | limitTo: product.title.length - 21}}</h2> 

     <p>{{product.description}}</p> 
     <button class="button button-block button-positive" ng-click="subscribe(product.productId)"> 
      Buy for {{product.price}} - {{product.productId}} 
     </button> 
    </ion-item> 
</div> 

product.productId правильно отображается, но не передается функции.

Использование директивы

<subscription-item active-subscription="activeSubscription" products="products" google-login="googleLogin()" subscribe="subscribe(sku)"></subscription-item> 

подписываться функцию в рамках родительского контроллера

$scope.subscribe = function (sku) { 
    console.log('subscribe ' + sku) 
    InAppBillingService.subscribe(sku) 
     .then(function() { 
      console.log('Success'); 
     }) 
     .catch(function (error) { 
      $cordovaToast.showLongBottom(error); 
     }); 
} 

Answer 1

Чтобы передать сделать данные доступными в качестве переменной в выражении, на которую ссылается subscribe атрибут, который в вашем случае равен subscribe(sku), вам необходимо указать «карту местных жителей» при вызове функции внутри директивы:

<button class="button button-block button-positive" ng-click="subscribe({sku: product.productId})"> 
     Buy for {{product.price}} - {{product.productId}} 
    </button> 

Теперь, когда у вас есть переменная sku в выражении атрибута subscribe, где бы вы ни использовали эту директиву, она будет иметь значение productId, которое затем будет работать.

Соответствующий раздел из the docs:

Часто желательно передавать данные из изолированного объема с помощью выражения в родительской области, это может быть сделано путем передачи карты имен локальных переменных и значений в оболочка выражения fn. Для примера , если выражение является приращением (суммой), мы можем указать значение , указав localFn как localFn ({amount: 22}).

Answer 2

& создает функцию в вашей директиве, которая возвращает результат выражения после оценки против родителей объем.

легко исправить будет изменить шаблон для:

<button class="button button-block button-positive" ng-click="subscribe()(product.productId)"> 
     Buy for {{product.price}} - {{product.productId}} 
</button> 

И использование в

<subscription-item active-subscription="activeSubscription" products="products" google-login="googleLogin()" subscribe="subscribe"></subscription-item> 

Answer 3

Как вы знаете, есть 3 AngularJs Директива методы Область применения: «@», «=», «&», но теперь мы будем говорить только о «&» method.We собираются, чтобы увидеть, как мы можем реализовать метод '&' в наших приложениях.

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

http://www.w3docs.com/snippets/angularjs/angularjs-directive-scope-method.html