Question

我有单页NodeJS + AngularJS应用程序。有一些字段可以填充文本。在controller.js中，我想检查一个或多个字段是否为空，以便在浏览器中发送错误警告。

我的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

Answer 1

请注意，如果没有输入任何字段，则$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";
            }
        }
    }
}]);

Answer 2

你需要向你的控制器注入$ window，并像这样使用它：

$window.alert("ERROR");

$window (angularjs doc)

在controller.js文件中处理AngularJS中的错误

2 个答案: