如何显示预加载器内按钮而不是文本角度JS？

Question

我使用角JS库ngActivityIndicator.当按下按钮时，我尝试在元素div中显示预加载器，而不是显示文本：

<div ng-activity-indicator="CircledDark">
    <div ng-click="Add();" class="btn shareBtn">
        <div ng-view></div>
        <span>Text</span>
    </div>
</div>

我在里面发布了<div ng-view></div>，并在父元素中添加了指令ng-activity-indicator="CircledDark"。

单击按钮时，调用显示预加载程序的函数：

$activityIndicator.startAnimating();

但是预加载程序是在按钮之外创建的：

<div ng-show="AILoading" class="ai-circled ai-indicator ai-dark-spin"></div>

这是官方文件，从这里我举了一个例子：https://github.com/voronianski/ngActivityIndicator#directive

如何显示预加载器内按钮而不是文本角度JS？

Answer 1

我认为唯一的解决方案是将ng-view和按钮分开，至少他们在示例页面中做类似的事情。因此，在您的标记中，您可以这样做：

<div ng-click="add()" class="btn btn-default" ng-activity-indicator="CircledDark">
  <span ng-show="!AILoading">Add</span>
</div>
<div ng-view ng-show="!AILoading">{{ delayedText }}</div>

在你的控制器里：

$scope.delayedText = "";
$scope.add = function() {
  $activityIndicator.startAnimating();
  $timeout(function() {
    $scope.delayedText = "Here we are!";
    $activityIndicator.stopAnimating();
  }, 3000);
};

这里是完整的演示，您可以玩CSS一点，这样按钮的大小就不会改变当文字被图标所取代。