Angularjsを使用して、テーブル行のバインド後にスピナーを動的に設定する方法

Question

ajax呼び出しでテーブルを更新していて、row.status == pendingの間にspin.jsスピナーを表示したいとします。 は、基本的に私は（コントローラ内のAJAXを介して）行演算が進行するにつれて正常

<div class="spinner"> 

から

<div class="hide"> 

にトグル行断片を有します。 私はどんな仕組みにも満足しています！ 値が

<div class="spinner"> 

あるとき私は何をするのに苦労していますが、あるは、スピナー上映を持っているそれ以外の場合は、隠されています。

 <table class="table table-hover"> 
      <thead> 
       <tr> 
        <th>url</th> 
        <th>status</th> 
       </tr> 
      </thead> 
      <tbody>     
       <tr data-ng-repeat="row in result.results"> 
        <td>{{row.link.url}}</td> 
        <td> <div loadingWidget class="{{(row.status == 'pending' ? 'spinner' : 'hide') }}"></div>{{row.status}}</td> 
       </tr>     
      </tbody> 
     </table> 

私の最新のスクリプト - 基本的に私は本当にあなたがngHideディレクティブを使用する必要があります

app.directive('loadingWidget', function ($rootScope) { 
    return { 
     restrict: 'E', 
     scope: { 
      field: '=', 
      attributes: '=', 
      editMode: '=' 
     }, 

     link: function (scope, element, attrs) { 
      scope.spinit = function() { 
       $rootScope.$broadcast('spinit'); 
      } 
     } 
    }; 
}); 

$scope.$on('spinit', function(element){ 
    //react to event 
    new Spinner().spin(element); 
}); 

Answer 1

、私がやっているのか分かりません。私はあなたの表示/非表示の状態を何にするかを決定するのが難しいです。ルールは、ng-hideの内容がtrueと評価された場合、要素はhiddenに設定されることです。

アクティブなクラスを切り替える必要がある場合は、要素を非表示にするだけでなく、ユーザーng-class。スコープ内の変数に基づいてクラスが設定されます。

<table class="table table-hover"> 
    <thead> 
     <tr> 
      <th>url</th> 
      <th>status</th> 
     </tr> 
    </thead> 
    <tbody>     
     <tr data-ng-repeat="row in result.results"> 
      <td>{{row.link.url}}</td> 
      <td> 
       <div loadingWidget class="spinner" ng-hide="row.status"></div> 
       {{row.status}} 
      </td> 
     </tr>     
    </tbody> 
</table> 

また、ルートスコープで$ broadcastを使用すると、非常に高価になり、ほとんど必要ありません。あなたのケースでは、Spinnerメソッドを直接呼び出すことはできません。

ngHideドキュメント：https://docs.angularjs.org/api/ng/directive/ngHide

ngClassドキュメント：https://docs.angularjs.org/api/ng/directive/ngClass

編集： わかりましたので、私はより徹底的にあなたのコードを通り抜けました。ここにいくつかの問題があります。 最初に、指示はhtmlのケバブケース、javascriptのcamelcaseです。つまり、あなたの指示は次のようになります：<div loading-widget class="spinner" ng-hide="row.status">。 また、ディレクティブ属性にEを制限しています。つまり、要素としてのみ使用でき、属性として使用しています。これを修正するには、restrictオプションを削除するか、restrict: 'A'に変更してください。 loadingWidgetディレクティブにはスコープはまったく必要ありません。正直なところ、ルートスコープを含めると何か間違っている可能性があります。 このすべてこのようなものになりますディレクティブでの結果：あなたはより多くの依存関係を気にしないので、もしまた、Spin.jsのラッパーモジュールは、角に既に存在している

app.directive('loadingWidget', function() { 
    return { 
     restrict: 'A', 
     scope: { 
      field: '=', 
      attributes: '=', 
      editMode: '=' 
     }, 
     link: function (scope, element, attrs) { 
      console.log("elm: ", element[0]); 
      new Spinner().spin(element[0]); 
     } 
    }; 
}); 

Plunkr Link

良い選択肢です（Link）。

スピナーを隠すロジックに関しては、ngShowをそのセル内にあるものの値で単純に使用します。値を更新するには、値を ''またはfalseまたはundefinedに設定します。ページの読み込み時または私が言及した値の1つに変更されると、スピナーは非表示になります。値が設定されると、もはや偽でなくなり、要素が表示されます。これは、変数にfalseを格納することを決して期待しない限り機能します。 Angularでは、スコープ変数を操作してダイジェストサイクルを待つだけで、本当に必要な場合以外はイベントを使用しないでください。いくつかのシンプルな状態変数を持つと、ngShowとngHideを組み合わせることで、ビュー内の簡単な状態変更を簡単に行うことができます。

優れたコードを記述することで快適になるというコアの価値角度コードは、基本的にスコープやディレクティブ以外のアプリケーションと対話しないことを認識しています。要素セレクタを避け、必要がないかぎりイベントを避けてください。 Much of AngularはJQueryのようなツールを避けるように設計されているため、コードを読みにくくすることができます。