Question

您好我的项目适用于Djnago和AngularJS。我希望在用户提交后包含引导警报。如果成功显示警报 - 成功等。我该怎么做？以下是我的angularJS代码：

$scope.submit =function(){
    data = {};
    angular.extend(data, $scope.final_data);
    angular.extend(data, { xxx: $scope.final_data.xxx });
    $http.post('{% url 'submission' %}', data).success(
        function(data){
            $scope.get_info();
            alert('DONE!')
        }).error(function(){
            alert('not submitted');
    })
};

警报都正常，我想用引导警报替换它。我怎样才能做到这一点？提前谢谢。

Answer 1

嗯，您可以根据错误状态使用ng-show / ng-hide显示/隐藏警报。我创建了一个 sample plunker。

<alert ng-show='alertType' type="{{alertType}}" close='removeAlert()'>{{alertType}} Alert</alert>
  <select ng-model="alertType">
    <option>danger</option>
    <option>success</option>
    <option>warning</option>
  </select>

这可能会对你有帮助。

Answer 2

使用AngularUI（Angular的bootstrap指令）

https://angular-ui.github.io/bootstrap/#/alert

Answer 3

请查看此包并添加您的意见 https://www.npmjs.com/package/lg-custom-alert

<button lg-alert="[scope-function]" lg-size="[size of the modal]" lg-type="[type]" lg-message="[message need to be displayed in the alert">
    Alert 
</button>

Answer 4

这是我使用的解决方法

查看文件：

<div class="alert alert-{{ResponseModel.ResponseType}}" alert-dismissible ng-show="ResponseModel.ResponseAlert">
<a href="#" class="close" ng-click="ResponseModel.ResponseAlert = false" aria-label="close">&times;</a>
<strong> {{ResponseModel.ResponseMessage}} </strong>
</div>

这有助于在需要时关闭警报消息框，并在显示警报消息时再次出现。在这里，ResponseModel.ResponseType将是可能包含信息，危险，成功等的警报类型，ResponseModel.ResponseAlert将用于显示隐藏警报消息，而ResponseModel.ResponseMessage将包含您要显示的消息。您可以根据需要随时拨打警报消息，如下所述：

Controller File:

$scope.ResponseModel = {};
$scope.ResponseModel.ResponseAlert = true;
$scope.ResponseModel.ResponseType = "danger";
$scope.ResponseModel.ResponseMessage = "Message to be displayed!!"

如何使用AngularJS使用Bootstrap警报

4 个答案: