0

在我的角度應用程序,我有一個網格,我有一個按鈕來顯示有關當前行的詳細信息。我通過$ http獲取詳細的數據到一個sql數據庫,當數據正確提取時,我打開一個模式窗口來顯示細節。我想要的是如果出現錯誤(例如,http狀態碼NOT FOUND),防止打開模式窗口。我的代碼如下:Hot取消在angularjs模式窗口的開放

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** 
       } 

      } 
     } 
    } 
+0

你可以在這裏訪問使用ui-bootstrap modal實現的本地'$ scope.close()'嗎? – glepretre

+0

@glepetre。我已經嘗試了這一點,但我得到以下錯誤:TypeError:Object#沒有方法「關閉」。我也嘗試了$ scope。$ close在angular-ui中,這是關於模態窗口的說明:另外,與模態內容相關的範圍增加了2種方法:* $ close(result)* $ dismiss(reason)這些方法可以輕鬆關閉模式窗口而無需創建專用控制器。我無法得到這個工作,只是不知道該怎麼做。 – zszep

+0

是否有任何永久解決方案?下面提到的所有答案都是解決.. – Raj

回答

0

這不是問題的解決方案,而是一種解決方法。

點擊按鈕先調用工廠方法,如果沒問題,打開模式,否則不要。

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!"); 
} 
+0

不能這樣做。我使用resolve屬性在窗口打開之前加載數據,以避免頁面閃爍。 – zszep

+0

您可以從http調用返回一個回調,並在該回調中打開模式。這不會給你頁面的閃爍。 – V31

+0

你的解決方案確實有效,認爲這不是我想到的。所以,正確的答案是你的。 – zszep

0

想以不同的方式:

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** 
     } 

    } 
0

這是我怎麼做,我定義了一個小型控制器的模式(我還使用了模態到我自己的控制器)。適用於您的情況:

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(); 
     } 
     } 
    } 
    }; 
+0

運行您的代碼時出現此錯誤:TypeError:Object#沒有方法'closeModal'。顯然,方法只在子範圍內可見。 – zszep

+0

哪個孩子的範圍?我錯過了一些東西。如果你編寫'controller:function(){...}'沒有參數,你會得到一個錯誤嗎? – glepretre

0

假設你的工廠的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 
    }); 
+0

是的,這是我最終做到的,但我想在啓動模態窗口時使用「解析」方法。 – zszep