Я пытаюсь решить проблему с дизайном моих моделей, представлений и директив в AngularJS. По сути, у меня есть список продуктов, которые заполняются на странице по категориям с добавлением количества полей для каждого из них. Мне нужно, чтобы эти количественные поля обладали двунаправленным связыванием с массивом orderItem, который я возвращаю и отправляю на сервер.Соответствие двух моделей с директивой
В настоящее время я могу получить массив oc.order.orderItems для обновления с помощью нового параметра orderItem, когда я изменяю поле количества продукта. Но когда я пытаюсь заполнить предыдущий заказ, у меня возникают проблемы с обновлением модели и представлением. Большая часть моей проблемы связана с тем, как я должен обрабатывать атрибут 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)