ng-show/ng-hide在添加"submit()"时循环，导致浏览器崩溃

Question

我正在尝试添加带有ng-show或ng-hide的错误消息。

<p ng-show="submit()">Incorrect login/password.</p>
<form method="POST" name="adminform" ng-submit="submit()" class="admin-login-form">
    <label for="username">Admin Login</label>
    <input ng-model="username" type="text" name="username" class="form-control" required autofocus="yes"/>
    <label for="password">Password</label>
    <input ng-model="password" type="password" name="password" class="form-control" required />
    <input type="submit" class="form-control" name="submit" value="Login" required/>
</form>

理想情况下，当 submit（） 运行时需要激活 show/hide 并且在登录时没有成功。但是，当我执行 ng-show="submit（）" 时，它可以工作但不断刷新和循环，使浏览器崩溃并在控制台中给出错误，即使提交按钮本身没有被单击。

$scope.submit = function() {
                  var data = {
                      'username': $scope.username,
                      'password': $scope.password
                  };
                  var hookphp = loginService.login();
                  hookphp.save(data,
                      function(result){
                          $location.path("dashboard");
                      },
                      function(){
                          alert('Invalid password/login.');
                      }
                  );
              };

此外，当登录不成功时，它永远不会给我警报。谁能建议如何正确做到这一点？我仍在弄清楚Javascript和Angular是如何工作的。多谢！

Answer 1

<p ng-show="errorVisible">Incorrect login/password.</p>

在角度

$scope.errorVisible = true/false (set it whenever you need it)

所以：

$scope.errorVisible = false;
$scope.submit = function() {
              var data = {
                  'username': $scope.username,
                  'password': $scope.password
              };
              var hookphp = loginService.login();
              hookphp.save(data,
                  function(result){
                      $location.path("dashboard");
                      $scope.errorVisible = false; //optional
                  },
                  function(){
                      $scope.errorVisible = true;
                  }
              );
          };

此外，它在初始代码中永远循环的原因是ng-show不断调用该函数，但该函数不返回任何内容。

Answer 2

在您的代码上，您的函数似乎不会返回 true 或false，具体取决于登录状态，因此在这种情况下，由于函数调用成功，函数的输出将始终true导致登录失败标签将始终可见。

正如@MrVentzi建议的那样，最好使用单独的范围变量来决定是否显示消息。如果您尝试这样做

<p ng-show="submit()">Incorrect login/password.</p>

ng-show将不断调用和侦听函数的输出。为了更好地向您展示，我创建了此示例：http://jsfiddle.net/eytt2d8x/