angularjs - 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>

每当单击“保存-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

[编辑]

如果您有兴趣将警报放入对话框，这里是其他 DemoPlunker

Answer 2

我会警惕混合使用 jQuery 和 Angular，它可以工作，但会变得混乱。您可能对此处的 Bootstrap-UI 模态感兴趣：http: //angular-ui.github.io/bootstrap/#/modal 它可以做您想做的事情等等。