angular.resumeBootstrapの再考

以前もちょっとだけangular.resumeBootstrapについて書いてたけどざっくりしてるし改めて色々やってみた

要件

angularアプリケーションを初期化する際にngDialogを使ってモーダルダイアログを出すってだけ

なのでngDialogで必要なngDialog.jsとngDialog.cssとngDialog-theme-default.css等を別途取ってくる

index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="ngDialog.css" />
    <link rel="stylesheet" type="text/css" href="ngDialog-theme-default.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.js"></script>
    <script src="ngDialog.js"></script>
    <script src="main.js"></script>
  </head>
  <body>
    <div ng-controller="SampleCtrl" ng-cloak>
      {% raw %}{{msg}}{% endraw %}
    </div>
  </body>
</html>

main.js

window.name = 'NG_DEFER_BOOTSTRAP!';

angular.module('sample', ['ngDialog'])
  .controller('SampleCtrl', ['$scope', function($scope) {
    console.log('SampleCtrl');
    $scope.msg = 'hoge';
  }]);

angular.element().ready(function() {
  angular.bootstrap(document, ['sample']);
  angular.injector(['ng', 'ngDialog']).invoke(['ngDialog', function(ngDialog) {
    var dialog = ngDialog.open({
      template: 'modal.html',
      showClose: false,
      overlay: false
    });

    angular.resumeBootstrap();

    setTimeout(function() {
      dialog.close();
    }, 3000);
  }]);
});

っていう感じでやれば良いっぽい。angular.injectorを使ってngDialogを取ってきてそれを使ってモーダルダイアログを出したあとにresumeBootstrap、そしてちょいとしたらngDialog.closeするっていう感じ

resumeBootstrapするタイミングが若干違うけどjsdo.itにうｐしておいたサンプルが以下