控制器功能AngularJS后，加载图标变为状态图标

Question

如何在控制器功能执行期间更改视图中的图标？
在我的功能开始时，图标应该是一个转轮，以显示状态正在加载并在此刻工作
然后在执行后状态为true或false。这应该用某种图标表示。我们举个简单的例子：
状态为真：
状态为false：

我尝试在模板中使用ng-bind-html="statusIcon"更改属性 和$scope.statusIcon = <i class="fa fa-check-square-o"></i>在我的控制器中导致insecure-error。

也许你们可以帮助我解决这个问题。

Answer 1

您可以使用ng-show和ng-hide有条件地显示一个图像或另一个图像：

HTML：

  <p>Status: 
    <span ng-show="loading"><i class="fa fa-check-square-o"></i></span>
    <span ng-hide="loading"><i class="fa fa-x-or-whatever-it-is"></i></span>
  </p>

控制器：

  $scope.loading = false;
  function getData() {
    $scope.loading = true;
    $http.get(someUrl).then(function(data) {
      $scope.data = data.data;
      $scope.loading = false;
    });
  }

Answer 2

要安全使用ng-bind-html，您还需要使用$sce。

幸运的是，在这种情况下，不需要使用ng-bind-html。 （这通常是正确的，除非您正在处理包含HTML的用户输入。尽可能尝试将HTML保留在模板中，而不是控制器中。）

在您的控制器中：$scope.statusIcon = "check";

在你的模板中：

<i class="fa" ng-class="{
    'fa-check-square-o': statusIcon == 'check',
    'fa-spinner':        statusIcon == 'spinner',
    'fa-whatever':       statusIcon == 'etcetera'
}"></i>

（或者如果你想对它超级懒惰，你可以插入一个类名本身，一个la <i class="fa {{statusIcon}}">。）