javascript - 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、すべて正常に動作します。div.alert私は 2/3を持ち、異なるスコープ ( $scope.alert1、 ) を持つことを考えてい$scope.alert2ましたが、もっと良い方法があると確信しています。

また、初回ロード時にdiv.alertが表示されてから消えます。ロード時にアラートを設定できましdisplay: noneたが、「よりクリーンな」方法を探していました。

英語は私の母国語ではないため、間違いを犯した可能性があります。申し訳ありません。ありがとう。