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"时使用上述样式显示弹出消息.上面的代码工作正常,但这样做有很多时间延迟.有没有办法使用角度显示这样的警报消息？

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

[编辑]

如果你有兴趣将警报放入对话框,这里有其他Demo in Plunker

Answer 2

我对混合 jQuery 和 Angular 持谨慎态度，它可以工作，但可能会变得混乱。您可能对这里的 Bootstrap-UI Modal 感兴趣： http://angular-ui.github.io/bootstrap/#/modal 它可以做您想做的事情甚至更多。