0

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?

Matt Hintzke
  • 7,744
  • 16
  • 55
  • 113

3 Answers3

2

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';
          }

      }

  }
}
Community
  • 1
  • 1
Darren Wainwright
  • 30,247
  • 21
  • 76
  • 127
  • Ok, So I understand that directives should be used when doing DOM manipulation, but how can I do something like make the directive's templateUrl be dynamic as well, so that I can create this overlay with any HTML I want inside of it? – Matt Hintzke Jun 24 '14 at 01:45
  • There is a 'template' property On the directives return function that can be assigned a function on the scope of the directive - in the link function you can say something like scope.mytemplate = function(){//logic in here} . That sort of thing? – Darren Wainwright Jun 24 '14 at 11:59
  • That template expects html. Or you can use the templateUrl property instead, in the same way and your scope function should return the url or script Id of the angular template you want to use. – Darren Wainwright Jun 24 '14 at 12:00
  • I've added a bit of code that shows you how you can set the template of the directive from within the directive. – Darren Wainwright Jun 24 '14 at 12:05
1

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.

dave walker
  • 3,058
  • 1
  • 24
  • 30
0

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>
Matt Hintzke
  • 7,744
  • 16
  • 55
  • 113