AngularJS +引導dismissable警報

Question

我想用AngularJS和Bootstrap
這是我的代碼
HTML

<div class="col-lg-9" ng-controller="manageProfile"> 
    <form style="margin-top:80px"> 
     <div class="alert alert-success alert-dismissible" ng-controller="dismiss" ng-show="successAlert == true"> 
      <button type="button" class="close" data-dismiss="alert" aria-label="Close" ng-click="dismissSuccess()"> 
       <span aria-hidden="true">&times;</span> 
      </button> 
      Username Changed! 
     </div> 
     <div class="form-group"> 
      <label>Display Name</label> 
      <input type="text" ng-model="currentName" class="form-control" placeholder="Display Name"> 
     </div> 
     <button class="btn btn-md" ng-click="changeName()">Change Username!</button> 
    </form> 
</div> 

AngularJS

profile.controller('manageProfile', ['$scope', function($scope) { 

    $scope.changeName = function() { 
     var user = Parse.User.current(); 
     user.setUsername($scope.currentName); 
     user.save(null, { 
      success: function(user) { 
       $scope.successAlert = true; 
       $scope.$apply(); 
      }, 
      error: function(error) { 
       $scope.errorAlert = true; 
       $scope.$apply(); 
      } 
     }); 
    }; 
}]); 

profile.controller('dismiss', ['$scope', function($scope) { 

    $scope.dismissSuccess = function(){ 
     $scope.successAlert = false; 
     $scope.$apply(); 
    } 
    $scope.dismissError = function(){ 
     $scope.errorAlert = false; 
    } 
}]); 

的概念是要創造一個dismissable警報在我通過點擊Change Username按鈕更改了我的用戶名後，它會顯示將$scope.successAlert的值設置爲true，並顯示不可用的引導警報。之後，如果我關閉了警報，它將觸發dismissSuccess()並將值$scope.successAlert設置爲false，這樣如果我再次更改我的用戶名（不重新加載頁面），它將再次顯示警報。
但是，此代碼不會讓我得到的結果我想

Answer 1

我知道它的一個非常古老的問題。但我面臨同樣的問題，問題仍然存在。 這是我如何解決它..

改變HTML

<div class="col-lg-9" ng-controller="manageProfile"> 
    <form style="margin-top:80px"> 
     <div class="alert alert-success alert-dismissible" ng-controller="dismiss" ng-show="profile.successAlert == true"> 
      <button type="button" class="close" aria-label="Close" ng-click="dismissSuccess()"> 
       <span aria-hidden="true">&times;</span> 
      </button> 
      Username Changed! 
     </div> 
     <div class="form-group"> 
      <label>Display Name</label> 
      <input type="text" ng-model="currentName" class="form-control" placeholder="Display Name"> 
     </div> 
     <button class="btn btn-md" ng-click="changeName()">Change Username!</button> 
    </form> 
</div> 

我改變這一行ng-show="successAlert == true"到ng-show="profile.successAlert == true"

和刪除data-dismiss="alert"。這是主要問題。此代碼的默認功能是從DOM中完全刪除alert parent div。

如果alert div從DOM去除那麼怎樣才能hide或show它。

在Javascript代碼一點點的變化

var profile = angular.module('myApp', []); 

profile.controller('manageProfile', ['$scope', function($scope) { 
     $scope.profile = {}; // make an empty object. This is a separate topic why should we add this. This is best practice. 
    $scope.changeName = function() { 
     /*var user = Parse.User.current(); 
     user.setUsername($scope.currentName); 
     user.save(null, { 
      success: function(user) { 
       $scope.successAlert = true; 
       $scope.$apply(); 
      }, 
      error: function(error) { 
       $scope.errorAlert = true; 
       $scope.$apply(); 
      } 
     });*/ 
     $scope.profile.successAlert = true;// I supposed your save call is success so show the success alert 
    }; 
}]); 

profile.controller('dismiss', ['$scope', function($scope) { 

    $scope.dismissSuccess = function(){ 
     $scope.profile.successAlert = false; 
     //$scope.$apply();// commented this line to prevent "$apply already in progress" thow 
    } 
    $scope.dismissError = function(){ 
     $scope.profile.errorAlert = false; 
    } 
}]); 

結帳小提琴https://jsfiddle.net/U3pVM/31040/