私のソリューションでは、兄弟ディレクティブが呼び出す関数の定義が含まれているため、最初にロードする必要のあるカスタムディレクティブがいくつかありました。例えば：
<div id="container">
<custom-directive1></custom-directive1>
<custom-directive2></custom-directive2>
<custom-directive3></custom-directive3>
</div>
残念ながら、ここでの解決策はどれも私にはうまくいきませんでした。なぜなら、それらはディレクティブをレンダリングした後にのみ機能し、背後にあるディレクティブコードでは機能しなかったからです。
したがって、上記のソリューションのいずれかを実装したときに、いくつかのロード関数を実行するために、ディレクティブがレンダリングされたとしても、スコープはそれらのディレクティブ内の関数が何であるかを知りませんでした。
そこで、コントローラーのどこにでもオブザーバブルを作成しました。
//Call every time a directive is loaded
$scope.$watch('directiveLoaded', function (value) {
debugger;
if (value == document.querySelector('#container').children.length) {
//Its ok to use childHead as we have only one child scope
$scope.$$childHead.function1_Of_Directive1();
$scope.$$childHead.function1_Of_Directive2();
}
});
次に、これら2つのディレクティブがあります。
scope.$parent.directiveLoaded += 1;
すべてのディレクティブの下部にあります。コントローラではオブザーバブルが定義されているため、変数を更新するたびにdirectiveLoaded、オブザーバブル関数が実行されます。はい、これがハックであることは知っていますが、すべてのディレクティブが最終関数を実行する前にコードビハインドとともにレンダリングを終了することを保証するために支払うのは少額です。
ここでデモを完了するために、後で呼び出す必要のある関数を定義する2つのディレクティブがあります。
指令1
(function () {
app.directive('customDirective1', function () {
return {
restrict: 'E',
templateUrl: '/directive1.html',
link: function (scope) {
scope.function1_Of_Directive1 = function() {
scope.function2_Of_Directive2();
console.log("F1_D1")
}
//AT BOTTOM OF EVERY DIRECTIVE
scope.$parent.directiveLoaded += 1;
}
}
});
})();
指令2
(function () {
app.directive('customDirective2', function () {
return {
restrict: 'E',
templateUrl: '/directive1.html',
link: function (scope) {
scope.function1_Of_Directive2 = function() {
console.log("F1_D2")
}
scope.function2_Of_Directive2 = function() {
console.log("F2_D2")
}
//AT BOTTOM OF EVERY DIRECTIVE
scope.$parent.directiveLoaded += 1;
}
}
});
})();