0

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

登录.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

控制器.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/3div.alert和不同的范围（$scope.alert1, $scope.alert2），但我确信有更好的方法。

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

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

4

1 回答 1

2

$scope.showAlert = true不在您的success和error回调范围内。因此，一旦您将呼叫设置showAlert为.true$http

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

于 2013-08-24T03:05:40.843 回答