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

<强> [编辑]

如果你有兴趣将警报放入对话框，这里是 Plunker

中的其他演示

Answer 2

我会对混合使用jQuery和Angular保持警惕，它可以工作，但可能会变得混乱。您可能对Bootstrap-UI Modal感兴趣： http://angular-ui.github.io/bootstrap/#/modal 它可以做你想要的和更多。

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

2 个答案: