匹配兩個模型與指令

我試圖解決在AngularJS中我的模型，視圖和指令的設計問題。基本上，我有一個按類別在頁面上填充產品的清單，每個清單都添加了數量字段。我需要這些數量字段與我從服務器返回併發布到服務器的orderItem數組進行雙向綁定。匹配兩個模型與指令

當我更改產品的數量字段時，可以使用新的orderItem更新oc.order.orderItems數組。但是，當我嘗試填充先前的訂單時，我在更新模型和視圖時遇到問題。我的問題的大部分源於我應該如何處理與我的指令相關的數量字段的ngModel屬性。

這裏是我的一些代碼示例（稍微剝離下來）。如果有什麼需要澄清，以幫助協助，因爲我知道這聽起來很混亂，請讓我知道。

產品型號：

var product = { id: 1, category_id: 1, name: 'Apple' };

OrderItem的型號：

var orderItem = { id: 1, order_id: 1, product_id: 1, quantity: 2 };

查看：

<div ng-repeat="category in oc.categories"> 
    <h2>{{ category.name }}<h2> 
    <div ng-repeat="product in category.products"> 
     <h3>{{ product.name }}</h3> 

     <input type="number" placeholder="Quantity" 
       order-item="product" ng-model="oc.order.orderItems[$index]" /> 
    </div> 
</div>

指令：

angular 
    .module('OrderApp') 
    .directive('orderItem', function ($window) { 
     return { 
      restrict: 'A', 
      scope : { 
       product: '=orderItem' 
      }, 
      require: 'ngModel', 
      link: function (scope, element, attrs, ngModelCtrl) { 

       ngModelCtrl.$parsers.push(function (viewValue) { 
        if (!viewValue > 0) return; 

        if (!scope.id) scope.id = 0; 
        if (!scope.order_id) scope.order_id = 0; 

        return { 
         id: scope.id, 
         order_id: scope.order_id, 
         quantity: viewValue, 
         product_id: scope.product.id 
        }; 
       }); 

       ngModelCtrl.$formatters.push(function (modelValue) { 
        if (!modelValue) return; 

        if (!modelValue.id) scope.id = modelValue.id; 
        if (!modelValue.order_id) scope.order_id = modelValue.order_id; 

        return modelValue.quantity; 
       }); 

      } 
     }; 
    });

（指令看起來並不正確，不知道在哪裏放置$ render和scope $ watch）

來源

2016-06-09 Pat Migliaccio

以不同的方式查看問題後，我發現我的解決方案不應該是指令，但實際上是用於在控制器之間共享每個模型的數據的服務。

解決方案：Gist

來源

2016-06-14 12:22:23

匹配兩個模型與指令

回答

相關問題