AngularJS + Bootstrap dismissable alert

AngularJS + Bootstrap dismissable alert

本文关键字：alert dismissable Bootstrap AngularJS      更新时间：2023-09-26

我想使用 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 ，这样如果我再次更改用户名（不重新加载页面），它将再次显示警报。
但是，此代码不会让我得到我想要的结果

我知道

这是一个非常古老的问题。但我遇到了同样的问题，这个问题仍然悬而未决。这是我解决它的方法..

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/

相关文章：