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

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警报display: none加载时display: none ，但我正在寻找一种“更清洁”的方式。

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

Answer 1

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

请记住， $http服务返回一个promise，并且不会立即调用回调（在这种情况下success和error ）。 只有在服务器响应后才会调用它们。 尝试在您的成功函数中设置$scope.showAlert = true ，看看它是否更像您期望的那样。