Question

在我的角度应用程序中，我有一个网格，我有一个按钮来显示当前行的详细信息。我通过$ http获取详细数据到sql数据库，当正确获取数据时，我打开一个模态窗口来显示详细信息。我想要的是如果出现错误（http状态代码NOT FOUND），则阻止打开模态窗口。我的代码如下：

var modalInstance = $modal.open({
    templateUrl: '/Scripts/app/views/konto/kontoCrud.htm',
    backdrop: true,
    keyboard: true,
    windowClass: 'szpModal fade in',
    controller: 'KontoCrudCtrl',
    resolve: {
        konto: function () {
            if ($scope.mode === "new") {
                return { mode: mode,
                    sifra: "",
                    naziv: ""
                };
            } else {
                //console.log($scope.selectedItem);
                var result = kontoFactory.getKonto($scope.selectedItem[0].id);
                console.log(result);
                if (result.status === "OK") {
                    return result;
                } else {
                    toastr.error("Error fetching data!");
                    **// HERE I WANT TO CANCEL THE OPENING OF THE WINDOW AS 
                    // THE RECORD WAS NOT FOUND**
                }

            }
        }
    }

Answer 1

这不是问题的解决方案，而是一种解决方法。

单击该按钮首先调用工厂方法，如果没有，则打开模态，否则不要。

var result = kontoFactory.getKonto($scope.selectedItem[0].id);
console.log(result);
if (result.status === "OK") {
    var modalInstance = $modal.open({
    templateUrl: '/Scripts/app/views/konto/kontoCrud.htm',
    backdrop: true,
    keyboard: true,
    windowClass: 'szpModal fade in',
    controller: 'KontoCrudCtrl',
    resolve: {
        konto: function () {
            if ($scope.mode === "new") {
                return { mode: mode,
                    sifra: "",
                    naziv: ""
                };
            } else {
                return result;
            }
        }
    }
});
} else {
    toastr.error("Error fetching data!");
}

Answer 2

以不同的方式思考：

var openModal = function(konto){

    var modalInstance = $modal.open({
        templateUrl: '/Scripts/app/views/konto/kontoCrud.htm',
        backdrop: true,
        keyboard: true,
        windowClass: 'szpModal fade in',
        controller: 'KontoCrudCtrl',
        resolve: {
            konto: function () {
                return konto;
            }
        }
}    
 if ($scope.mode === "new") {
    openModal({ mode: mode,
            sifra: "",
            naziv: ""
        });

    } else {
        //console.log($scope.selectedItem);
        var result = kontoFactory.getKonto($scope.selectedItem[0].id);
        console.log(result);
        if (result.status === "OK") {
            openModal(result);
        } else {
            toastr.error("Error fetching data!");
            // THE RECORD WAS NOT FOUND**
        }

    }

Answer 3

这就是我的工作方式，我为模态定义了一个小型控制器（我也将模态用于我自己的控制器）。适用于您的案例：

var modalInstance = $modal.open({
  templateUrl: '/Scripts/app/views/konto/kontoCrud.htm',
  backdrop: true,
  keyboard: true,
  windowClass: 'szpModal fade in',
  //change the controller
  controller: function($scope, $modal) {
    $scope.closeModal = function() {
      $scope.$close();
    };
  },
  // here I used modalInstance.result.then(function() {});
  // but resolve should work too
  resolve: {
    konto: function () {
      if ($scope.mode === "new") {
        return { mode: mode,
                sifra: "",
                naziv: ""
        };
      } else {
        //console.log($scope.selectedItem);
        var result = kontoFactory.getKonto($scope.selectedItem[0].id);
        console.log(result);
        if (result.status === "OK") {
          return result;
        } else {
          toastr.error("Error fetching data!");
          // call you close function
          $scope.closeModal();
        }
      }
    }
  };

Answer 4

假设你工厂的getKonto函数是这样的：

function getKonto(id) {
  return $http.get('/youService/getKonto/' + id).then(function (response) {
     if (response.status === 200) {
         return response.data;
     } else {
         throw new Error("Something happened!");
     }
  });
}

然后在你的else语句中你应该做这样的事情：

kontoFactory.getKonto($scope.selectedItem[0].id)
   .then(function (result) {
      //OPEN YOUR MODAL HERE
   })
   .catch (function (error) {
      //PROVISION TO SHOW YOUR ERROR HERE
   });

热取消在angularjs中打开模态窗口

4 个答案: