質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.38%

  • AngularJS

    613questions

    AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,063

tk1012

score 8

前提・実現したいこと

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

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

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

該当のソースコード

かなり簡略化して書いています

<div ng-controller="TestController" ng-init="init()">
TEST
<directiv1></directiv1>
<directiv2></directiv2>
</div>
<div>
ディレクティブ1
</div>
<div>
ディレクティブ2
</div>
.controller('TestController', ['$scope', function ($scope) {
        $scope.init = function(){

        }
        //いろいろな処理
}]);
.directive("directiv1", ["$http", function ($http) {
        return {
            restrict: 'E',
            scope: {},
            templateUrl: 'directiv/directiv1',
            link: function (scope, element, attr) {
            //いろいろな処理
}]);
.directive("directiv2", ["$http", function ($http) {
        return {
            restrict: 'E',
            scope: {},
            templateUrl: 'directiv/directiv2',
            link: function (scope, element, attr) {
            //いろいろな処理
}]);

試したこと

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

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

リンク

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

変更リンク

<html>
 <head>
  <link rel="stylesheet" href="style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>  


  <script>
    angular.module('App', []).controller('TestController', function($scope) {


    }).directive('directiv1', function($timeout){
      return {
        restrict: 'E',
        scope: {} ,
        require: '^directiveLoadingSpinner',
        template: '<div id="d1"></div>',
        link: function (scope, element, attr, parent) {
          parent.loadStart();
          $timeout(function() {
            //いろいろな処理
            document.getElementById('d1').innerHTML = "ディレクティブ1";
            parent.loaded();
          }, 500);
        }
      }; 
    }).directive('directiv2', function($timeout){
      return {
        restrict: 'E',
        scope: {} ,
        require: '^directiveLoadingSpinner',
        template: '<div id="d2"></div>',
        link: function (scope, element, attr, parent) {
          parent.loadStart();
          $timeout(function() {
            //いろいろな処理
            document.getElementById('d2').innerHTML = "ディレクティブ2";
            parent.loaded();
          }, 2000);
        }
      }; 
    }).directive('directiveLoadingSpinner', function(){
      var loadCount = 0;
      var directiveCount = 0;
      return {
        restrict: 'AEC',
        controller: function($scope, $element) {
          // コンテンツ非表示
          $element.css('display','none');
          // スピナー追加
          $element.after('<div id="spinner"><div id=loading-bar-spinner><div class=spinner-icon></div></div></div>');

          // directiveの件数カウント
          this.loadStart = function(){
            directiveCount += 1;
          }

          // directiveの読込終了
          this.loaded = function(){
            loadCount += 1;
            if(loadCount === directiveCount){
              $element.css('display','block');
              document.getElementById('spinner').style.display = 'none';
            }
          }
        }
      }; 
    });

  </script>
 </head>
 <body ng-app="App">
  <div ng-controller="TestController">

    <div directive-loading-spinner>
      TEST
      <directiv1></directiv1>
      <directiv2></directiv2>
    </div>

  </div>
 </body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/11/01 14:29

    ご丁寧にリンクをありがとうございます。拝見させていただきました。
    とても分かりやすかったです。

    ですが、私の作成している画面では、ディレクティブを多数使用しており、
    今後、ディレクティブを増やす、または減らす可能性もあるため、
    明示的にディレクティブの個数を数えてカウントするこの方法はうまく使えそうにありません。

    script内で使用しているディレクティブの個数を数える方法はあるのでしょうか。

    キャンセル

  • 2016/11/04 16:54

    ベストアンサーの選択に時間がかかってしまい、すみませんでした。

    私個人でも、いろいろと考え、検索してみたのですが
    スッキリしたものは見つかりませんでした。

    pinpikokunn様のソースならば、望んでいた動きになるので、
    そちらを真似て次に進もうと思います。

    ご丁寧にありがとうございました。

    キャンセル

  • 2016/11/04 17:00 編集

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.38%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • AngularJS

    613questions

    AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。