单击按钮时在按钮内显示加载栏

Question

我在angularjs中有这个简单的事情，需要一点dom操作，我认为它是某种指令，但我不知道如何处理它。

我有这个简单的按钮：（html）

      <button class="btn btn-success" style='margin-bottom:17px' style='margin-right:5px;' ng-show='pageToShow <  pages.length-1' ng-click='changePage("next")'>
         <span class="glyphicon glyphicon-arrow-right" style='margin-right:5px' aria-hidden="true"></span>Next 
      </button>

当我点击它时，我想在里面，而不是！ glyphicon，一个移动的gif，像这样：

1）如何删除按钮内已存在的img并更换它？ 2）我想要其他类型的微调器，而不是圆形旋转器，如何更改默认微调器？

我该怎么办？

Answer 1

查看此指令，它完全符合您的要求：

https://github.com/jvdvleuten/angular-button-spinner

一个演示：

https://rawgit.com/jvdvleuten/angular-button-spinner/master/demo.html

您可以将button-prepend =“”和spinner-icon =“”的类更改为定义自己的微调器/ gif的css类。

Answer 2

您可以使用http://www.ajaxload.info创建自己的加载gif。然后，使用ng-show确定是否应该显示gif或图标。

<button ng-click="loading = !loading;" class="btn btn-success">
  <img ng-show="loading" src='http://i.imgur.com/1HDbs9b.gif' />
  <span ng-show="!loading" class="glyphicon glyphicon-arrow-right"></span>
  Next
</button>

http://plnkr.co/edit/6N4x5bZyiilV2GMqCP48?p=preview