在angularjs $ modal中使用resolve等待RESTful结果

时间:2019-06-04 14:15:33

标签: javascript angularjs rest angular-ui

我正在研究一些将angularjs 1.x用于Web前端的遗留代码。我需要创建一个模式对话框,当模式打开时,它将对后端进行RESTful调用,并等待数据返回后再渲染视图。

我能够弄清大部分需要做的事情,但是有一件事我仍然无法解决。我的理解是我需要使用'resolve'定义一个函数,该函数将$ promise返回给控制器。但是,当我在控制器中放置一个断点时,该参数是一个包含promise,解决状态以及最终我的实际数据的对象。

我可以从该对象中提取所需的数据,但是感觉我不必这样做。我的控制者并不在乎诺言本身。只是返回的数据。有什么方法可以构造这种结构,以便仅将数据发送到控制器,或者这仅仅是期望的角度模态如何表现?

我的代码示例:

$scope.openTerritorySelect = function () {

                var modalInstance = $modal.open({
                    animation: true,
                    templateUrl: 'prospect/detail/selectTerritoriesModal.tpl.html',
                    controller: function($scope, $modalInstance, availableReps){

                        $scope.reps = availableReps;
                        $scope.ok=function()
                        {
                            $modalInstance.close();
                        };

                        $scope.cancel=function()
                        {
                            $modalInstance.dismiss('cancel');
                        };
                    },
                    resolve: {
                        availableReps: function () {
                           return Prospect.getRelatedReps({}, function (data, header) {
                                $scope.busy = false;
                                return data.result;

                            }, function (response) {
                                $scope.busy = false;

                                if (response.status === 404) {
                                    $rootScope.navError = "Could not get reps";
                                    $location.path("/naverror");
                                }

                            }).$promise;

                        }
                    }

                });

                modalInstance.result.then(function (selectedReps) {

                }, function () {
                    console.log('Modal dismissed at: ' + new Date());
                });
            };

“前景”服务类:

angular.module('customer.prospect', [ "ngResource" ]).factory('Prospect', [ 'contextRoute', '$resource', function(contextRoute, $resource) {
    return {

        getRelatedReps : function(args, success, fail) {

            return this.payload.getRelatedReps(args, success, fail);
        },

        payload : $resource(contextRoute + '/api/v1/prospects/:id', {

        }, {

            'getRelatedReps' : {
                url : contextRoute + '/api/v1/prospects/territories/reps',
                method : 'GET',
                isArray : false
            }
        })
    };

} ]);

1 个答案:

答案 0 :(得分:0)

通过甚至在打开模式之前发出REST请求,可以大大简化事情。如果请求失败,您甚至想打开模式吗?

$scope.openTerritorySelect = function () {
  Prospect.getRelatedReps({}, function (data, header) {
    $scope.busy = false;
    var modalInstance = $modal.open({
      animation: true,
      templateUrl: 'prospect/detail/selectTerritoriesModal.tpl.html',
      controller: function($scope, $modalInstance, availableReps){
        $scope.reps = availableReps;
         $scope.ok = function() {
           $modalInstance.close();
         };
         $scope.cancel = function() {
           $modalInstance.dismiss('cancel');
         };
       },
       resolve: {
         availableReps: function () {
           return data.result;
       }
    });

    modalInstance.result.then(function (selectedReps) {}, 
      function () {
        console.log('Modal dismissed at: ' + new Date());
      });
  }, function (response) {
    $scope.busy = false;

    if (response.status === 404) {
      $rootScope.navError = "Could not get reps";
      $location.path("/naverror");
    }

 });
};