javascript - angularjs 中的 ng-show 不适用于 span

Question

我在 Angularjs 中遇到了 ng-show 的问题。我有一个文本框，用户可以在其中输入服务器的主机名。输入此信息后，服务器的主机名将发送到后端系统，以验证服务器是否存在。我目前正在使用 bootstrap、font awesome 和 angularjs 在我的文本框中显示一个加载图标。当我收到来自服务器的响应时，我将 isLoaded 变量更改为 true，我希望加载图标停止显示。但是，这不会发生。无论图标最初设置为何种状态，此后都不会改变。

这是我的问题的简化版本。 Plunker Link Here

HTML

<form>
        <div class="form-group has-feedback">
          <label for="server">Server:</label>
          <input type="text" id="server" class="form-control" placeholder="server host name">
          <span ng-show="{{testVm.state}}" class="fa fa-spinner fa-spin form-control-feedback" aria-hidden="true"></span>          
          <button class="btn btn-primary" ng-click="testVm.turnOn()">Activate</button>
          <button class="btn btn-primary" ng-click="testVm.turnOff()">Deactivate</button>
        </div>
      </form>

Angular 代码:

angular
  .module('test',[])
  .controller('TestController',TestController);
function TestController() {
  var testVm = this;
  testVm.turnOn = turnOn;
  testVm.turnOff = turnOff;
  testVm.state = false;
  function turnOn() {
    testVm.state = true;
  }
  function turnOff() {
    testVm.state = false;
  }

感谢任何帮助。谢谢。

Answer 1

您使用 ng-show 的方式不对。您不需要双花括号，因为您没有计算变量的字符串值。

<span ng-show="testVm.state" class="fa fa-spinner fa-spin form-control-feedback" aria-hidden="true"></span>

Fixed plunker