在加载页面时管理资源承诺的正确方法

时间:2014-01-20 22:01:31

标签: javascript angularjs angularjs-directive promise angular-resource

我有一个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;
        }
      }
    })
  }]);

编辑:尝试在控制器中解析,但显然指令被采取行动,因此必须在指令中解决承诺。

0 个答案:

没有答案