AngularJS: один или несколько директив?

Question

Моя проблема: у меня есть объект продукта следующим образом: {id: 1, category: 'Television', price: '$2000',...}, затем создаю директиву product. Пользователь может купить продукт с помощью функции product scope buy(quantity). Но у меня много продуктов, создайте область с этой функцией, чтобы каждый продукт мог быть пустой памятью? Должен ли я создать дополнительную директиву, productBuyer имеет способ: buy(product, quantity), затем product директива require: '^productBuyer' будет помещена в нее? Какой дизайн лучше, когда масштабы применения? Или еще лучше?

Подробнее: Я не ставил buy на заводе, потому что product должен отображать сообщение об ошибке, если ошибка покупки (по многим причинам: устаревший продукт, товар-склад пуст, не доставляйте его пользователю. ..), этот метод процесса передается в директиву product.

Answer 1

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

app.js

angular.module("myApp", []). 
.controller("shoppingCtrl", function($scope, productSvc){ 
    productSvc.getProducts() 
    .then(function(products){ 
     $scope.products = products; 
    }); 

    $scope.buyProduct = function(product){ 
     productSvc.buy(product) 
     .then(function(){ /* do something */ }); 
    } 
}) 
.directive("product", function(){ 
    return { 
     restrict: "EA", 
     scope: { 
     product: "=", 
     onBuy: "&" 
     }, 
     templateUrl: "productDirective.html", 
     controller: function($scope){ 
     $scope.clickOnBuy = function(){ 
      $scope.onBuy(); 
     } 
     } 
    }; 
}); 

productDirective.html

<div> 
    <div>{{product.title}}</div> 
    <div>{{product.price}}</div> 
    <button ng-click="clickOnBuy()">Buy</button> 
</div> 

index.html

Наконец, в вашем HTML вы можете сделать:

<div ng-controller="shoppingCtrl"> 
    <div ng-repeat="item in products" product="item" on-buy="buyProduct(item)"></div> 
    <hr/> 
</div>