Javascript AngularJS+；引导可解除警报

我想使用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>

这个概念是在我通过单击

Change username

按钮更改用户名后，它会将

$scope.successAlert

的值设置为

true

，并显示可解除引导警报。在此之后，如果我关闭警报，它将触发

dismisssucture（）

，并将

$scope.successAlert

的值设置为

false

，这样，如果我再次更改用户名（无需重新加载页面），它将再次显示警报。

---

但是，这段代码不允许我得到我想要的结果

我知道这是一个非常古老的问题。但我面临着同样的问题，这个问题仍然悬而未决。 下面是我如何解决它的

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> 

检查小提琴

<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> 

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;
    }
}]);