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

概念是在我通过点击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" 。这是主要问题。此代码的默认功能是从alert parent div完全删除DOM。

如果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/

AngularJS + Bootstrap不允许的警报

1 个答案: