1

コントローラーの $scope から取得したデータを使用して HTML 要素を構築する AngularJS のディレクティブを使用しています。サーバーからJSONデータを取得したときに、コントローラーに $scope.ready=true 変数を設定させました。この方法では、ディレクティブは、データがフェッチされるたびにページを何度も構築する必要がありません。

発生するイベントの順序は次のとおりです。

  1. コントローラー ページはルートを読み込み、コントローラー関数を起動します。

  2. ページはディレクティブをスキャンし、この特定のディレクティブが起動されます。

  3. ディレクティブは要素を構築し、その式を評価して先に進みますが、ディレクティブ リンク関数が起動されると、コントローラーが「準備完了」になるまで待機します。

  4. 準備ができたら、内部関数が起動され、パーシャルの構築が続行されます。

これは機能しますが、コードは面倒です。私の質問は、これを行う簡単な方法はありますか? コントローラーがイベントを発生させた後にコードが発生するように、コードを抽象化できますか? この onReady 内部メソッドを作成する代わりに。

これがどのように見えるかです（動作しますが、テストするのは面倒です）：

angular.module('App', []).directive('someDirective',function() {

  return {

    link : function($scope, element, attrs) {

      var onReady = function() {
        //now lets do the normal stuff
      };

      var readyKey = 'ready';
      if($scope[readyKey] != true) {
        $scope.$watch(readyKey, function() {
          if($scope[readyKey] == true) {
            onReady();
          }
        });
      }
      else {
        onReady();
      }

    }

  };

});
4

2 に答える 2

2

$scope.$emitコントローラーと$rootScope.on("bradcastEventName",...);ディレクティブで使用できます。良い点は、ディレクティブが分離されており、いつでもプロジェクトから引き出すことができることです。このイベントに応答するために、アプリのすべてのディレクティブとその他の「実行中」のコンポーネントに同じパターンを再利用できます。

于 2012-08-12T18:03:40.937 に答える
0

私が発見した2つの問題があります：

  • XHR リクエストがバックグラウンドで発生しても、テンプレートの読み込みは妨げられません。
  • データを変数に適用することと、実際にそのデータをページのバインディングに適用することには違いがあり$scopeます ($scope がダイジェストされる場合)。したがって、データをスコープに設定し、イベントを発生させてスコープの準備が整ったことをパーシャルに通知しても、そのパーシャルのデータ バインディングの準備が整っていることは保証されません。

したがって、これを回避するには、最善の解決策は次のとおりです。

  1. このプラグインを使用して、コントローラーと以下のディレクティブ間のイベント処理を管理します: https://github.com/yearofmoo/AngularJS-Scope.onReady

  2. ディレクティブ テンプレートの HTML に、JavaScript 関数が取得して使用することを期待するデータを入れないでください。たとえば、次のようなリンクがあるとします。

    <a data-user-id="{{ user_id }}" href="/path/to/:user_id/page">My Page</a>

    問題は、ディレクティブが属性:user_idから値を準備しdata-user-id、href 値を取得してデータを置き換える必要があることです。これは、ディレクティブが継続的にdata-user-id属性をチェックして、そこにあるかどうかを確認する必要があることを意味します (attrs ハッシュを数分ごとにチェックすることによって)。

    代わりに、別のスコープ変数を URL に直接配置します。

    <a href="/path/to/{{ directive_user_id }}/page">My Page</a>

    そして、これをディレクティブに配置します：

    $scope.whenReady(function() { $scope.directive_user_id = $scope.user_id; });

于 2012-11-16T15:12:14.833 に答える