Question

我正在使用AngularJS作为登录表单，我正在使用用户名/密码对服务器进行API调用并显示警告。

login.jade

// form
input(type="submit",ng-click="submit()")
div.alert(ng-show="showAlert",class="{{alert}}",ng-animate="{show: 'alert-show', hide: 'alert-hide'}")
button(ng-click="showAlert = !showAlert") fadeIn

controller.js

$scope.submit = function () {
  if ($scope.username != undefined && $scope.password != undefined) {
    $http({
      method: 'POST',
      data: {
        username: $scope.username,
        password: $scope.password
      },
      url: 'api/login'
    }).
    success(function (data, status, headers, config) {
      if (data.auth) {
        $scope.alert = data.alert;
      } else {
        $scope.alert = data.alert;
      }
    }).
    error(function (data, status, headers, config) {
      // something else
    });
    $scope.showAlert = true;
  }
}

data.alert是警报的类别（alert-success，alert-warning），但它会立即显示警报，不会褪色。如果我删除$scope.alert = data.alert，一切正常。我在想2/3 div.alert，并且有不同的范围（$scope.alert1，$scope.alert2），但我确信有更好的方法。

此外，在初始加载时，显示div.alert然后淡出。我可以在加载时在display: none设置警报，但我正在寻找一种“更清洁”的方式。

英语不是我的母语，所以我可能犯了错误，道歉。感谢。

Answer 1

$scope.showAlert = true超出了您的success和error回调。因此，只要您将呼叫设置为showAlert，就可以将true设置为$http。

请记住，$http服务会返回一个承诺，并且不会立即调用回调（本例中为success和error）。只有在服务器响应后才会调用它们。尝试在成功功能中设置$scope.showAlert = true，看看是否更符合您的预期。

使用angularjs提交表单后显示提醒

1 个答案: