ng –includeによるhtmlロードの終了を検出するための最良の方法は何ですか。ロードが終了したらコードを書きたいです。
何か考えてくれてありがとう。
回答：
回答№1は68いつ検出するかは2つの方法があります ng-include 必要に応じて、読み込みが完了しました。
1）経由 onload 属性-インライン式用。例：
<div ng-include=""template.html"" onload="loaded = true"></div>
2）イベント経由 $includeContentLoaded それ ng-include 放出-アプリ全体の処理用。例：
app.run(function($rootScope){
$rootScope.$on("$includeContentLoaded", function(event, templateName){
//...
});
});
コンテンツの読み込みが終了したとき
回答№2の15
あなたは使うことができます onload 以下のようにそれのために
<div ng-include=".." onload="finishLoading()"></div>
コントローラーでは、
$scope.finishLoading = function() {
}
ロード後 ng-include finishLoading スコープ関数が呼び出されます。
これが作業です デモプランカー
回答№3のための8
このコードを使用することができます：
$scope.$on("$includeContentLoaded", function () {
// it has loaded!
});
回答№4の場合は0
これがすべてをキャッチする完全な例です ng-include アプリケーションによって発行されたロードイベント：
<html ng-app="myApp">
<head>
<script src="angular.min.js"></script>
</head>
<body ng-controller="myController">
<div ng-include=""snippet.html""></div>
<script>
var myApp = angular.module("myApp",[]);
myApp.controller("myController", function($scope) {
$scope.$on("$includeContentLoaded", function(event, target){
console.log(event); //this $includeContentLoaded event object
console.log(target); //path to the included resource, "snippet.html" in this case
});
});
</script>
</body>
</html>
私が抱えていた問題と、これを投稿するのに時間がかかる理由は、両方を含めることができなかったためです。 ng-app そして ng-controller 私のHTMLマークアップで。
回答№5の場合は0
要素が存在するのを待つ必要がある場合は、 $timeout 〜と $includeContentLoaded：
var selector = "#foo";
$rootScope.$on("$includeContentLoaded", function(event, templateName){
$timeout(() => {
const $el = angular.element(selector);
if ($el.length) {
// Do stuff with element.
}
});
});
タイムアウトにより、特に次の場合に、適切に時間のロードが行われます。 ng-include レンダリングに数ミリ秒かかるディレクティブが含まれています。