twitter-bootstrap 如何使用 AngularJS 使用 Bootstrap 警报
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33337750/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use Bootstrap alerts using AngularJS
提问by gentle
Hi My project works on Djnago and AngularJS. I want include bootstrap alerts once the user submit. If it is successful show alert-success etc. How can I do this? The following is my angularJS code:
嗨，我的项目适用于 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');
})
};
Both the alert is working, I want to replace that with bootstrap alerts. How can I do that? Thanks in advance.
两个警报都在工作，我想用引导程序警报替换它。我怎样才能做到这一点？提前致谢。
回答by Rebel
Well, you can show/hide alert using ng-show/ng-hide according to error status . I have created a sample plunker.
好吧，您可以根据错误状态使用 ng-show/ng-hide 显示/隐藏警报。我创建了一个 示例 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>
This may help you.
这可能对你有帮助。
回答by Mark Pieszak - Trilon.io
Use AngularUI (bootstrap directives for Angular)
使用 AngularUI（Angular 的引导指令）
回答by user2166669
Please look into this package and add your opinions https://www.npmjs.com/package/lg-custom-alert
请查看此包并添加您的意见 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>
回答by Sunny12
Here is the workaround I have used
这是我使用的解决方法
view file:
查看文件：
<div class="alert alert-{{ResponseModel.ResponseType}}" alert-dismissible ng-show="ResponseModel.ResponseAlert">
<a href="#" class="close" ng-click="ResponseModel.ResponseAlert = false" aria-label="close">×</a>
<strong> {{ResponseModel.ResponseMessage}} </strong>
</div>
This helps to close the alert message box when required and also appear again when displaying the alert message. Here ResponseModel.ResponseType will be the type of alert that could info, danger, success, etc., ResponseModel.ResponseAlert will be used to show hide the alert message and ResponseModel.ResponseMessage will contains the message you want to display. You can call the alert message whenever required like described below:
这有助于在需要时关闭警报消息框，并在显示警报消息时再次出现。在这里 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!!"
