Executing code at the end of angular initialization, and ngCloak display

Question

I have a webpage written in angular with an ngCloak directive. It is loaded in a dynamically sized iframe with pym.js.

The trouble is that the page does not appear unless I resize the browser or trigger a resize event, or call pymChild.sendHeight() after the page loads.

I don't see any events associated with ngCloak though. Is there an angular event for "page is rendered, controllers are initialized"?

score 2 · Accepted Answer · answered Jul 18 '14 at 14:56

2

There is the $timeout service:

$timeout(function() {
   // this code will execute after the render phase
});

answered Jul 18 '14 at 14:56

Michael Kang

52,003
16
103
135

So if I do $timeout() with no delay parameters it waits till after rendered? I don't see that [documented](https://docs.angularjs.org/api/ng/service/$timeout). Is that guaranteed? – Justin Dearing Jul 18 '14 at 15:04
AFAIK, `$timeout` is pretty the same as `window.setTimeout` except it will do extra things after a supplied callback has been executed. However, I'm too believe the callback will be executed after the app initialization, but I couldn't prove it though. – runTarm Jul 18 '14 at 16:34

runTarm · Answer 2 · 2014-07-18T17:12:40.667

You could write a directive that execute a callback in postLink function, since the postLink will be called last in the $compile life cycle.

.directive('onInitialized', function ($parse) {
  return {
    restrict: 'A',
    priority: 1000, // to ensure that the postLink run last.
    link: function postLink(scope, element, attrs) {
      $parse(attrs.onInitialized)(scope);
    }
  }
});

and place it at the element that you would like to know when it and all its template-ready decendants have got compiled, for example:

<body ng-controller="MainCtrl" on-initialized="hello()">

and in the MainCtrl controller:

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.hello = function () {
    console.log('Hello ' + $scope.name);
  };
})

For template-ready, I mean all directives except: directives with templateUrl and the template haven't ready in the $templateCache yet, since they will get compiled asynchronously.

Hope this helps.

Executing code at the end of angular initialization, and ngCloak display

2 Answers2

Linked