teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

コード追加

2016/11/01 10:18

投稿

pinpikokun
pinpikokun

スコア376

answer CHANGED
@@ -6,4 +6,90 @@
6
6
  いまいちな作りですがdirective数を取得するようにしました.
7
7
  自分もよい方法を知りたいです.
8
8
 
9
- [変更リンク](http://plnkr.co/edit/fWu4it7ryUKzbyqmof7c?p=preview)
9
+ [変更リンク](http://plnkr.co/edit/fWu4it7ryUKzbyqmof7c?p=preview)
10
+
11
+
12
+ ```html
13
+ <html>
14
+ <head>
15
+ <link rel="stylesheet" href="style.css">
16
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
17
+
18
+
19
+ <script>
20
+ angular.module('App', []).controller('TestController', function($scope) {
21
+
22
+
23
+ }).directive('directiv1', function($timeout){
24
+ return {
25
+ restrict: 'E',
26
+ scope: {} ,
27
+ require: '^directiveLoadingSpinner',
28
+ template: '<div id="d1"></div>',
29
+ link: function (scope, element, attr, parent) {
30
+ parent.loadStart();
31
+ $timeout(function() {
32
+ //いろいろな処理
33
+ document.getElementById('d1').innerHTML = "ディレクティブ1";
34
+ parent.loaded();
35
+ }, 500);
36
+ }
37
+ };
38
+ }).directive('directiv2', function($timeout){
39
+ return {
40
+ restrict: 'E',
41
+ scope: {} ,
42
+ require: '^directiveLoadingSpinner',
43
+ template: '<div id="d2"></div>',
44
+ link: function (scope, element, attr, parent) {
45
+ parent.loadStart();
46
+ $timeout(function() {
47
+ //いろいろな処理
48
+ document.getElementById('d2').innerHTML = "ディレクティブ2";
49
+ parent.loaded();
50
+ }, 2000);
51
+ }
52
+ };
53
+ }).directive('directiveLoadingSpinner', function(){
54
+ var loadCount = 0;
55
+ var directiveCount = 0;
56
+ return {
57
+ restrict: 'AEC',
58
+ controller: function($scope, $element) {
59
+ // コンテンツ非表示
60
+ $element.css('display','none');
61
+ // スピナー追加
62
+ $element.after('<div id="spinner"><div id=loading-bar-spinner><div class=spinner-icon></div></div></div>');
63
+
64
+ // directiveの件数カウント
65
+ this.loadStart = function(){
66
+ directiveCount += 1;
67
+ }
68
+
69
+ // directiveの読込終了
70
+ this.loaded = function(){
71
+ loadCount += 1;
72
+ if(loadCount === directiveCount){
73
+ $element.css('display','block');
74
+ document.getElementById('spinner').style.display = 'none';
75
+ }
76
+ }
77
+ }
78
+ };
79
+ });
80
+
81
+ </script>
82
+ </head>
83
+ <body ng-app="App">
84
+ <div ng-controller="TestController">
85
+
86
+ <div directive-loading-spinner>
87
+ TEST
88
+ <directiv1></directiv1>
89
+ <directiv2></directiv2>
90
+ </div>
91
+
92
+ </div>
93
+ </body>
94
+ </html>
95
+ ```

1

修正

2016/11/01 10:18

投稿

pinpikokun
pinpikokun

スコア376

answer CHANGED
@@ -1,3 +1,9 @@
1
1
  以下のような感じでしょうか
2
2
 
3
- [リンク](http://plnkr.co/edit/AEjCQAyO3a0cDaH0WH6e?p=preview)
3
+ [リンク](http://plnkr.co/edit/AEjCQAyO3a0cDaH0WH6e?p=preview)
4
+
5
+
6
+ いまいちな作りですがdirective数を取得するようにしました.
7
+ 自分もよい方法を知りたいです.
8
+
9
+ [変更リンク](http://plnkr.co/edit/fWu4it7ryUKzbyqmof7c?p=preview)