在controller.js文件中處理AngularJS中的錯誤

我有單頁NodeJS + AngularJS應用程序。有一些字段需要填寫文字。在controller.js中，我想檢查一個或多個字段是否爲空，以便在瀏覽器中發送錯誤警報。在controller.js文件中處理AngularJS中的錯誤

我controller.js文件：

var myApp = angular.module('myApp', []); 
myApp.controller('AppCtrl', ['$scope', '$http', function($scope, $http) { 
    console.log("Hello World from controller"); 

    //$http.get('/builder').success(function(response){ 
    // $scope.PEM = response; 
    //}); 

    $scope.sendParts = function(){ 
     var bool = true; 
     for(var prop in $scope.pem){ 
      if(prop == 'undefined'){ 
       bool = false; 
       break; 
      } 

      if(bool){ 
       $http.post('/builder', $scope.pem).success(function(response){ 
       $scope.PEM = response; 
      }); 
      } 
      else{ 
       // why it is not working? 
       alert("ERROR"); 
       //OR 
       $scope.PEM = "ERROR"; 
      } 
     } 
    } 
}]);

index.html文件：

<!DOCTYPE> 
<html ng-app="myApp"> 
<head> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
      integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" 
      integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 

    <title>PEMbuilder</title> 
    <style> 
     .container { 
      margin-left: 30%; 
      margin-top: 5%; 
      padding: 10px; 
      background: #ffbf80; 
      width: 390px; 
      border: 2px solid #ffbf80; 
      border-radius: 5px; 
     } 
     textarea { 
      resize: vertical; 
     } 

    </style> 
</head> 
<body> 


    <div class="container" ng-controller="AppCtrl"> 
    <h1>PEMbuilder</h1> 
      <h4><b>Name of project:</b></h4> 
      <input class="data" ng-model="pem.name" type="text"> 
      <h4><b>Certificate:</b></h4> 
      <textarea rows="4" cols="50" class="data" ng-model="pem.crt" placeholder="Enter your certificate"></textarea> 
      <h4><b>Intermediate:</b></h4> 
      <textarea rows="4" cols="50" class="data" ng-model="pem.int" placeholder="Enter your intermediate"></textarea> 
      <h4><b>Root:</b></h4> 
      <textarea rows="4" cols="50" class="data" ng-model="pem.root" placeholder="Enter your root"></textarea> 
      <h4><b>Private key:</b></h4> 
      <textarea rows="4" cols="50" class="data" ng-model="pem.pk" placeholder="Enter your private key"></textarea> 
      <h4><b>Password:</b></h4> 
      <input class="data" ng-model="pem.pass" type="password"> 

      <h4><button class="btn btn-primary" ng-click="sendParts()">Create full certificate</button></h4> 
      <h4><button class="btn btn-primary" onclick="window.location.href = '/download';">Download full certificate</button></h4> 

     <h3 style="color: red">{{err}}</h3> 
     <a onclick="$('#text').slideToggle('slow');" href="javascript://">Show/Hide full pem file</a> 
     <div id="text" style="display:none; white-space: pre-wrap; word-wrap: break-word; -moz-control-character-visibility: visible;">{{PEM}}</div> 

    </div> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js'></script> 
    <script src='controllers/controller.js'></script> 
</body> 
</html>

所以我想以某種方式處理如有字段爲空。 screenshot of app

來源

2016-02-24 Володя Герасименко

退房ngForm和自定義驗證 –

你有沒有通過您的代碼加強，以確保'布爾'實際上是假的？另外，我沒有看到$ scope.pem在哪裏啓動。最後，你指的是$ scope.pem和$ scope.PEM。 – jbrown

'$ scope.pem'只有在至少有一個帶有輸入的字段時纔會被定義。一個簡單的工作應該是初始設置'''var bool = $ scope.pem'''。不過，我建議你也看看ngForm – walkerrandophsmith

請注意，當沒有字段輸入文字時，$scope.pem未定義。一旦至少有一個字段有文字輸入，就定義模型。快速解決問題的辦法是檢查$scope.pem === undefined是否符合條件，提出警報。

var myApp = angular.module('myApp', []); 
myApp.controller('AppCtrl', ['$scope', '$http', function($scope, $http) { 

    $scope.sendParts = function(){ 
     if($scope.pem === undefined) alert("I have no fields filled out") 
     var bool = true; 
     for(var prop in $scope.pem){ 
      if(prop == 'undefined'){ 
       bool = false; 
       break; 
      } 

      if(bool){ 

      } 
      else{ 
       // why it is not working? 
       alert("ERROR"); 
       //OR 
       $scope.PEM = "ERROR"; 
      } 
     } 
    } 
}]);

來源

2016-02-24 21:20:31 walkerrandophsmith

請檢查'ngForm' – walkerrandophsmith