AngularJSが非同期ロードを完了した後にDOMにコンテンツを追加する

Question

$http.get経由で非同期に8つのjsonファイルをフェッチする角度コードがあります。これは添付されているテンプレートコードでng-init="someFunct()"を使用して呼び出されます。ユーザーが入力テキストボックスに入力するときにフィルタリングを含め、すべてがうまく機能します。フィルタリングは私のアプリケーションにとって特に重要です。

フィルタリングをさらに改善するために、上記のjsonファイルからキーワードを抽出し、<span class="tag" ng-click="filterWith='kywd'">{{kywd}}</span>でラップして、ユーザがタイプではなくタグをクリックできるようにします。これは、タグを静的に埋め込む場合にのみ有効です。実際のアプリケーションでは、事前にキーワードを知ることができません。私が$("#someContainerID").append(TAG_HTML_CODE)またはそれに類するものを介して動的に挿入すると、決して動作しません！一言で言えば

これは私が達成するために必要なものです：

1）動的にDOMに）数百人に（そのようなタグを複数を注入。

2）タグは他のものがロードされコンパイルされた後にのみ注入します。特に、jsonファイルが読み込まれてキーワードが抽出された後でなければなりません。

3）私はAngularJSは、他のすべての処理が終了したときに伝える方法があった場合ng-click="filterWith='some_keyword'"

のようなものに対応する必要が注入タグ - これは可能だろうか素晴らしいが！私はどこにでも読んでいるし、それはとてもわかりにくくて混乱しているようだ - 助けてください！

私も無駄に次のコードを試してみました：

$timeout(function() { 
     $scope.$apply(function() { 

      //code that works on the keywords - works perfect! 

      var filterRegex = /\s*([\w\d.%]+)\s*/i; 
      var dom_elem = angular.element(document.querySelector("#filter_tags")); 
      dom_elem.html(""); 
      for (var m = 0; m < tags.length; m += 1) { 
       var match = filterRegex.exec(tags[m][0]); 
       if (match != null) { 
        dom_elem.append($compile("<span data-ng-model=\"filterWith\" data-ng-click=\"filterWith='" + match[1] + "'\" title=\"" + tags[m][1] + "\" class=\"sk3tag clk\">" + match[1] + "</span>")($scope)); 
       } 
      } 
     }); 
    }, 10000, false); 
} 

はEDIT：主に一つに私の挑戦の範囲を狭めを！

動的に注入されたコードでng-clickを有効にする方法と、それを正しく行う方法が私にとって大きな課題です。

Answer 1

Promise.all()を使用して、すべてがロードされたときにトリガーします。

Answer 2

私は上記の質問をしました。誰かが、私が指示の詳細を読むことを勧めました。私はかなりうまくいった。私は、DOMに動的に注入されたHTMLコードでclickイベントを使用するために、次の解決策を考え出しました。私は最終的にそれを理解するために真に神に感謝します。私はもはや非同期データを待つ必要はなく、モデルが更新されるたびに自分のhtmlタグが自動的に更新されます - MVCの魔法！それは素晴らしい動作するようです！

アンギュラ //抜粋

myNgApp.controller('ctlTodayLatest', ['$scope', '$timeout', '$compile', '$http', function() { 
    $http.get('/filtertags.json').then(function (response) { 
      $scope.filterTags = response; 
     }, 
     function (response) { 
      // called asynchronously if an error occurs 
      // or server returns response with an error status. 
      console.log(response); 
     } 
    ); 
}]); 

myNgApp.directive("myFilterTag", function() { 
    return { 
     template: "<span data-ng-repeat=\"tag in filterTags\" title=\"{{tag[0]}}\" class=\"mytag clk\" ng-click=\"filterWith(tag[0])\">{{tag[0]}}</span>", 
     link: function (scope, element, attrs) { 
      scope.filterWith = function (term) { 
       scope.fQ = term; 
      }; 
     } 
    }; 
}); 

HTML //抜粋

<div id="filter_tags" class="xip2 TAj" my-filter-tag></div>