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

问题

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"?

回答1:

There is the $timeout service:

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

回答2:

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.

来源：https://stackoverflow.com/questions/24827873/executing-code-at-the-end-of-angular-initialization-and-ngcloak-display

标签

angularjs

ngcloak

pym.js