1

我正在开发一个带有ASP.NET、MVC5和HTML5的网站AngularJS。

在此处输入图像描述

更新

我在 Chrome 控制台中没有警告。

font-awesome 字体在我的 web 项目中是本地的。

在我的 web.config 中有这个：

<system.webServer>
    <staticContent>
        <remove fileExtension=".woff" />
        <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
        <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
        <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>

我有一个发出 Angular$http请求的函数，我需要在按下按钮时更改图标类。

目前，在我的角度控制器中，我有这个：

$scope.requested = false; // Initial value: false.

$scope.search = function (model) {
    $scope.requested = true; // When the function is called.

    $http({
        method: "POST",
        url: DFJB.systempath + "api/getdata",
        data: model
    }).success(function (data, status, headers, config) {
        $scope.requested = false; // When the request is completed.
        console.log(data);  
    }).error(function (data, status, headers, config) {
        console.log("Error: " + status);
    });
};

HTML5：

<button class="btn btn-primary" data-ng-disabled="frmModel.$invalid" type="submit">
    <i data-ng-class="{'fa fa-search': requested == false, 'fa fa-refresh fa-spin': requested == true}"></i>
    Search
</button>

但是，它无法正常工作。

调用该函数时，图标会以不正确的外观更改： 在此处输入图像描述

请求完成后，图标变回不正确的外观： 在此处输入图像描述

我希望在视觉上：

在此处输入图像描述

有什么建议可以解决这个问题吗？

谢谢。

4

3 回答 3

1

首先你应该确保已font-awesome 加载。见page source。

并且您的表单名称应如下frmModel所示：

<form name="frmModel" data-ng-submit="search()">

      <input type="text" data-ng-model="userName" required>
      <button type="submit" class="btn btn-primary" data-ng-disabled="frmModel.$invalid">
           <i class="fa" data-ng-class="{'fa-search': !requested, 'fa-refresh fa-spin': requested}"></i>

           Search
      </button>
    </form>

参见 PLUNKER 工作演示

于 2015-09-17T19:48:34.513 回答
1

正如我在评论中所建议的那样，您应该尝试将必要的类fa移至，class因为无论requested价值如何，它都是必需的。

此外，您可以为 ng-class 尝试以下语法：

<button class="btn btn-primary" data-ng-disabled="frmModel.$invalid" type="submit">
    <i class="fa" data-ng-class="requested? 'fa-refresh fa-spin': 'fa-search'"></i>
    Search
</button>
于 2015-09-17T20:51:36.790 回答
0

当您的font-awesome库中的字体文件未正确加载到浏览器中时，就会发生这种情况。您应该在浏览器的控制台中看到错误。

如果您正在使用下载的库，请评论它们并尝试直接从云中使用，如下所示 http://fontawesome.io/get-started/

更新：

另外，您能否尝试更新您的代码，例如：

<button class="btn btn-primary" data-ng-disabled="frmModel.$invalid" type="submit">
    <i class="fa" data-ng-class="{'fa-search': !requested, 'fa-refresh fa-spin': requested}"></i>
    Search
</button>

始终添加fa类以避免一次又一次地添加和删除它。此外，使用requested == falseto!requested和requested == trueto requested。

于 2015-09-17T19:14:45.097 回答