directiveの描画完了イベントを取得したい

###前提・実現したいこと
angularjsのDirectiveでいくつかの共通部品を作成しています。
その共通部品をいれた画面を表示すると、
親画面の描画後に子画面の描画が走り、ちらつきがでてしまっています。
ちらつきがでることは仕方ないのだろうと思い、
「読み込み中」というパネルをはじめに表示し、
描画が完了し次第消すことにしようと考えているのですが、
複数個ある子画面の描画完了のタイミングをとることができません。

※共通部品は複数あり、それらを使用する画面も複数あるため、
どの部品が最後に生成されるかはわかりません。

このような場合、親子すべての描画が完了したというイベントをどのように発生させればよいのでしょうか。

###該当のソースコード
かなり簡略化して書いています

html
1<div ng-controller="TestController" ng-init="init()">
2TEST
3<directiv1></directiv1>
4<directiv2></directiv2>
5</div>

html
1<div>
2ディレクティブ１
3</div>

html
1<div>
2ディレクティブ２
3</div>

javascript
1.controller('TestController', ['$scope', function ($scope) {
2        $scope.init = function(){
3        
4        }
5        //いろいろな処理
6}]);
7.directive("directiv1", ["$http", function ($http) {
8        return {
9            restrict: 'E',
10            scope: {},
11            templateUrl: 'directiv/directiv1',
12            link: function (scope, element, attr) {
13            //いろいろな処理
14}]);
15.directive("directiv2", ["$http", function ($http) {
16        return {
17            restrict: 'E',
18            scope: {},
19            templateUrl: 'directiv/directiv2',
20            link: function (scope, element, attr) {
21            //いろいろな処理
22}]);

###試したこと
.runは試しましたが、親画面の完了時にしか発生しないため、使えませんでした。

行動規範の内容に同意します

回答1件

ベストアンサー

以下のような感じでしょうか

リンク

いまいちな作りですがdirective数を取得するようにしました.
自分もよい方法を知りたいです.

変更リンク

html
1<html>
2 <head>
3  <link rel="stylesheet" href="style.css">
4  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>  
5  
6  
7  <script>
8    angular.module('App', []).controller('TestController', function($scope) {
9      
10      
11    }).directive('directiv1', function($timeout){
12      return {
13        restrict: 'E',
14        scope: {} ,
15        require: '^directiveLoadingSpinner',
16        template: '<div id="d1"></div>',
17        link: function (scope, element, attr, parent) {
18          parent.loadStart();
19          $timeout(function() {
20            //いろいろな処理
21            document.getElementById('d1').innerHTML = "ディレクティブ1";
22            parent.loaded();
23          }, 500);
24        }
25      }; 
26    }).directive('directiv2', function($timeout){
27      return {
28        restrict: 'E',
29        scope: {} ,
30        require: '^directiveLoadingSpinner',
31        template: '<div id="d2"></div>',
32        link: function (scope, element, attr, parent) {
33          parent.loadStart();
34          $timeout(function() {
35            //いろいろな処理
36            document.getElementById('d2').innerHTML = "ディレクティブ2";
37            parent.loaded();
38          }, 2000);
39        }
40      }; 
41    }).directive('directiveLoadingSpinner', function(){
42      var loadCount = 0;
43      var directiveCount = 0;
44      return {
45        restrict: 'AEC',
46        controller: function($scope, $element) {
47          // コンテンツ非表示
48          $element.css('display','none');
49          // スピナー追加
50          $element.after('<div id="spinner"><div id=loading-bar-spinner><div class=spinner-icon></div></div></div>');
51          
52          // directiveの件数カウント
53          this.loadStart = function(){
54            directiveCount += 1;
55          }
56          
57          // directiveの読込終了
58          this.loaded = function(){
59            loadCount += 1;
60            if(loadCount === directiveCount){
61              $element.css('display','block');
62              document.getElementById('spinner').style.display = 'none';
63            }
64          }
65        }
66      }; 
67    });
68    
69  </script>
70 </head>
71 <body ng-app="App">
72  <div ng-controller="TestController">
73    
74    <div directive-loading-spinner>
75      TEST
76      <directiv1></directiv1>
77      <directiv2></directiv2>
78    </div>
79  
80  </div>
81 </body>
82</html>

投稿2016/11/01 04:25

編集2016/11/01 10:18

pinpikokun

総合スコア376

tk1012

2016/11/01 05:29

ご丁寧にリンクをありがとうございます。拝見させていただきました。とても分かりやすかったです。ですが、私の作成している画面では、ディレクティブを多数使用しており、今後、ディレクティブを増やす、または減らす可能性もあるため、明示的にディレクティブの個数を数えてカウントするこの方法はうまく使えそうにありません。 script内で使用しているディレクティブの個数を数える方法はあるのでしょうか。

tk1012

2016/11/04 07:54

ベストアンサーの選択に時間がかかってしまい、すみませんでした。私個人でも、いろいろと考え、検索してみたのですがスッキリしたものは見つかりませんでした。 pinpikokunn様のソースならば、望んでいた動きになるので、そちらを真似て次に進もうと思います。ご丁寧にありがとうございました。

pinpikokun

2016/11/04 08:00 編集

参考になるかはわかりませんが私が作成した事のあるアプリではdirective自体がデータを取得してくる処理はあまり使用せず、「ui-router」のresolveを使用し、画面に必要な情報を取得してから各データをdirectiveに渡すため、今回のようなことはあまり発生したことがありませんでした。ちなみにロード中...の処理は「angular-loading-bar」に任せてしまっています。

行動規範の内容に同意します