CODEWITHSUNDEEP
angularjs
Matt Hintzke
Matt Hintzke

Reputation: 7984

How to properly check when Angular loads HTML into DOM dynamically

I am having a really hard time getting my application to be event-based whilst using AngularJS. In jQuery, it is extremely easy to check when the DOM is loaded into the document, so that event listeners can be bound to the new DOM. However, I am trying to get this same effect in Angular and I cannot find a way that is not "hacky".

For example, I am using ng-include to add partial views to the DOM when an overlay is added to the document and a single <div> is displayed for the user to interact with. However, I cannot center this <div> correctly because I need to run JavaScript after it is loaded in order to center it properly.

I tried using ng-init="center()" in my partial views, but I don't think Angular is re-compiling the view after it gets added, therefore the ng-init is never getting called. What can I do to get this event-based functionality without doing some weird hack?

Upvotes: 0

Views: 224

Answers (3)

Darren Wainwright
Darren Wainwright

Reputation: 30727

You're doing what I did when I first started with Angular - thinking in the JQuery way.

See this post for a lot more info in 'thinking' differently How do I “think in AngularJS” if I have a jQuery background?

With regards to your specific issue. You can create a directive which you attach, by way of an attribute, to your div. You then, in the link object of the return, for that directive, set your CSS - using javascript if needed.

I.E something like this, pseudo-code

app.Directives('myDirective', function()){
  return{
     restrict: 'A',
     link: function(scope, elem, attr){
         //do something with elem - it's an angular.element which you can also
         // interact with using jquery methds.
         // such as elem.hide();
         // you can also search through its child nodes in the same
         // way with jquery, like elem.each(.....
      }

  }
}

Then on your div do something like <div my-directive></div>

Ultimately you have to 'think' differently.

I would also recommend NOT using JQuery in your directives to really get used to the 'Angular' way

Update

As per the comments. If you want to dynamically change the template that the directive is using - in this case the templateUrl, you can do something like:

app.Directives('myDirective', function()){
  return{
     restrict: 'A',
     template: '<div ng-include="setTemplate()"></div>',
     link: function(scope, elem, attr){

         scope.setTemplate = function(){
             // do your logic here...
             return 'overlay.html';
          }

      }

  }
}

Upvotes: 2

dave walker
dave walker

Reputation: 3108

If you are dynamically adjusting the position of a div, you should probably be doing this with a custom directive on that div. The directive's link function will get your div as its second parameter. You can then use jQuery or jQLite to position it how you like.

Upvotes: 1

Matt Hintzke
Matt Hintzke

Reputation: 7984

I just needed to use the onload attribute on my ng-include div that was being loaded

<div id="cover" ng-include="overlay.url" onload="centerIt()"></div>

Upvotes: 0

Related Questions