AngularJS:显示成功消息的更好方法

Question

$('body').on('click', '#save-btn', function () { 
      $('#greetingsModal').modal('show'); 
 });


<div id="greetingsModal" class="modal hide fade" tabindex="-1" role="dialog" aria-  labelledby="myModalLabel" aria-hidden="true">
<div class="alert alert-success">        
     <a href="../admin/Supplier" class="close" data-dismiss="alert">x</a>
    <strong>Well done!</strong>.
</div>

我想在单击“save-btn”时使用上述样式显示弹出消息。上面的代码工作正常，但是这样做会造成很多时间延迟。有没有办法使用 Angular 显示这样的警报消息？

Answer 1

Bootrstrap-UI 有相当好的警报。我们可以对所有警报使用同一个地方。只需修改内容即可。

HTML

<div class="alert alert-success" ng-show="showSuccessAlert">
   <button type="button" class="close" data-ng-click="switchBool('showSuccessAlert')" >×</button>
   <strong>Done!</strong> {{successTextAlert}}
 </div>

JS

$scope.successTextAlert = "Some content";
$scope.showSuccessAlert = true;
....
// switch flag
$scope.switchBool = function(value) {
   $scope[value] = !$scope[value];
};

演示 Fiddle

[编辑]

如果您有兴趣将警报放入对话框中，这里是 Plunker 中的其他演示