我有一个html页面,显示包含多个产品行的表格。每行都有一个选择下拉列表,允许用户选择“工作表”。在该表格上方是一个信息框,显示所有产品的选定工作表 - 该信息根据所选内容而有所不同。我把它设置为指令。
我的产品数据(实际上它是带有产品数组的一个项目)是使用resolve / resource加载的,因此作为承诺提供。我在设置主表单等数据时遇到困难,因为它要求我查看所有产品,直到视图已呈现/承诺完成后才能使用这些数据。以下指令说明了我的问题:
app.directive('sheet', function() {
return {
restrict: "EAC",
link: function(scope, elm, attrs) {
// Watch the table data where a user can assign a sheet to a product row
scope.$watch('item.products', function(n, o) {
if (n) {
// Update info on master sheet
setMaster();
}
}, true);
// Master sheet function - it checks if all product sheets are same - if they are then it shows the sheet code
// else it shows "mixed" - or if new then "Select a sheet" - this info is shown above product table page
var setMaster = function() {
var sheets = [];
// If I don't do this then the last setMaster() call (used to init the master sheet in load)
// will throw errors about item.products being undefined
scope.item.$promise.then(function(item) {
item.products.forEach(function(product) {
if (!~sheets.indexOf(product) && product.sheet) sheets.push(product.sheet);
});
});
// Assign info to master sheet variable
scope.master = sheets.length ? sheets.length > 1 ? 'Mixed' : sheets[0].code : 'Select a sheet';
};
// Set on page load
setMaster();
}
};
});
我的问题是:处理这个和其他负载(在页面上(重新加载))需要解决的承诺的函数的最佳方法是什么。在上面的指令中,我正在解决每个观看事件的承诺 - 这是否昂贵?什么是最干净的方式。我已经考虑过只在我的控制器中解决一次,但整个事情看起来很人为,我想知道是否只有一些旗帜或其他我可以设置来处理这些问题。
路线:
resolve: {
items: function(Orders, $route) {
return Orders.list(); // Just a simple Resource
}
}
控制器:
app.controller('ViewOrderCtrl', function(scope, item) {
$scope.item = item;
});
资源:
app.factory('Orders', ['$resource',
function($resource) {
return $resource('/api/orders/:id', {}, {
list: {
method: 'GET',
isArray: true,
transformResponse: function(response, headers) {
var data = angular.fromJson(response);
return data;
}
}
})
}]);
编辑:尝试在控制器中解析,但显然指令被采取行动,因此必须在指令中解决承诺。