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/