javascript - 如何使用 AngularJS 有条件地在按钮中显示 HTML？

Question

我希望某个按钮元素默认包含纯文本，但随后包含基于我的 Angular 范围内的某些变量的 HTML。我的目标是让按钮显示“保存”，但随后被禁用并在单击时显示加载轮(同时等待长 AJAX 请求的响应)。问题是，Angular 在按钮中显示我的三元运算符的文字文本，而不是表达式的结果。

这是我的按钮的样子:

<button type="submit" ng-disabled="IsLoading" ng-click="OnClick()">
  {{ IsLoading === false ? "Save" : "<i class='fa fa-spinner fa-pulse'></i>" }}
</button>

当我将 HTML 更改为一些纯文本(例如“正在加载...”)时，它就可以正常工作。

如何让它显示表达式的结果而不是表达式本身的文本？谢谢。

旁注:I tried to get a demo up and running ，但我似乎无法弄清楚如何使用 JSFiddle 正确连接 Angular。这不是我问题的目的，但我真的很想知道我哪里出错了，这样我将来就可以成功地制作简单的 Angular 演示。如有任何建议，我们将不胜感激。

Answer 1

看看这个 fiddle

<div ng-app="myApp" ng-controller="LoadingController">
  <div style="float: left;">
    <button type="submit" ng-disabled="IsLoading" ng-click="OnClick()">
      <span ng-if="!IsLoading">
        Save
      </span>
      <span ng-if="IsLoading">
        <i class="fa fa-spinner fa-pulse"></i>
      </span>

    </button>
  </div>
  <div style="float: left;">
    <button type="submit" ng-disabled="IsLoading" ng-click="OnClick()">
     <span ng-if="!IsLoading">
        Save
      </span>
      <span ng-if="IsLoading">
        Loading...
      </span>
    </button> 
  </div>
</div>

js

angular.module("myApp",[]).controller('LoadingController', function   LoadingController ($scope) {
    $scope.IsLoading = false;

  $scope.OnClick = function() {
    $scope.IsLoading = true;
    window.setTimeout(function() {
        $scope.IsLoading = false;
    }, 1000);
  };
});

注意:Angular 1.1.5 添加了 ternary operator支持，而你的 fiddle 指向旧版本，这就是它不起作用的原因