1

ASP.NET、MVC5、HTML5およびを使用して Web サイトを開発してい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 WORKING DEMOを見る

于 2015-09-17T19:48:34.513 に答える
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 に答える