添加內容到DOM後，AngularJS已完成異步加載

我有角碼，通過$http.get異步獲取8個json文件。這是在附加的模板代碼中使用ng-init="someFunct()"來調用的。一切都很好，包括當用戶鍵入輸入文本框時進行過濾。過濾對我的應用程序尤其重要。添加內容到DOM後，AngularJS已完成異步加載

爲了使過濾更好，我從所說的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); 
}

編輯：縮小我的挑戰主要是一個範圍內！

對我來說，更大的挑戰是如何在動態注入代碼中啓用ng-click以及如何正確執行。

來源

2016-03-31 user3607612

使用Promise.all()在加載所有內容時觸發。

來源

2016-03-31 12:48:10

確定。我會嘗試它，但似乎只會解決知道什麼時候下載文件的問題？我面臨的更大挑戰是如何在動態注入的代碼中啓用'ng-click'。 – user3607612

@ user3607612你應該真的瞭解有關角度指令而不是手動操作DOM https://docs.angularjs.org/guide/directive –

早些時候我問過上面的問題。有人建議我改讀指令。我做得很好。我想出了下面的解決方案，在動態注入DOM的html代碼上使用click事件。最後，我真誠地感謝上帝幫助我解決問題。我不再需要等待異步數據，無論何時它會更新模型，我的html標記會自動更新 - MVC魔術！它似乎很好！

ANGULAR //摘錄

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>

來源

2016-04-01 01:32:28 user3607612

非常感謝你提供的有關角度指令的建議@НЛО。祝福你！ – user3607612

添加內容到DOM後，AngularJS已完成異步加載

回答

相關問題