如何使用 AngularJS 使用 Bootstrap 警报

Posted 2023-02-24

【中文标题】如何使用 AngularJS 使用 Bootstrap 警报

【英文标题】：How to use Bootstrap alerts using AngularJS

【发布时间】：2016-01-25 01:55:33

【问题描述】：

嗨，我的项目适用于 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');
    )
;

两个警报都有效，我想用引导警报替换它。我怎样才能做到这一点？提前致谢。

【问题讨论】：

我搜索并获得了这个自定义指令。 github.com/marcorinck/angular-growl 。你可以用这个。

嗨 Jigs，我很困惑如何在这种情况下使用它

不明白为什么controller后面有个list

对不起，我没有使用那个模块。您可以使用引导警报。好吧，请参阅我的示例示例。

【参考方案1】：

这是我使用的解决方法

查看文件：

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

【参考方案2】：

请查看此包并添加您的意见 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>

【参考方案3】：

好吧，您可以根据错误状态使用 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>

这可能会对你有所帮助。

【讨论】：

@Hema CDN 无法正常工作。谢谢提醒。它现在可以工作了，但它有点过时了。

【参考方案4】：

使用 AngularUI（Angular 的引导指令）

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

【讨论】：

嗨，mcpDESIGNS，我知道这一点。但是我怎样才能将这个实现到我的 angularJS 部分呢？