How do a grab a DOM element as soon as it has been loaded

Question

I'm working on an angular application that uses ng-grid through out on one of the grids I have a cell template with an ng-init function attached to one of it's dom elements.

var cellTemplate = '<div class="fooProperty" ng-init="setIcon($event, \'foo\',row.entity.foo)" ng-class="{\'foo_enabled\' : row.entity.foo, \'foo_disabled\' : !row.entity.hasFoo}"  ng-click="changeRole($event, \'foo\')" title="Foo Bar"></div>'

The code I have written for setIcon in my directive is

scope.setIcon = function($event,type,iconInfo){
  var target = $event.target; 
  var row = (target).parent().parent();
  console.log(type+": "+iconInfo);
  console.log(row);
};

The problem I'm having is that when the ng-init function fires I get an error message saying TypeError: Cannot read property 'target' of undefined at var target = $event.target;.

EDIT:

So the issue is that I can't use $event on ng-init since no DOM event happens. My question now is how can I edit the above code to grab the DOM element as soon as it's loaded (essentially I need to know the proper angular equivalent of onload)?

[`$event` is not available with nginit](https://docs.angularjs.org/guide/expression#-event-). There is no event to pass, since no DOM event happens on ng-init. It is also out of spec to use ng-init other than for aliasing ng-repeats special properties. — PSL, Oct 07 '14 at 15:51
Then I should probably ask a separate question instead. What's the proper Angular equivalent of JavaScript or JQuery's onload event? — Working Title, Oct 07 '14 at 15:58
You can update the same question and post your actual issue with relevant code and possibly a demo. This is an x/y problem which makes you do this way. — PSL, Oct 07 '14 at 15:59
Here is your answer. http://stackoverflow.com/a/23717845/2710175 — Raju Mandapati, Oct 07 '14 at 17:58

score 2 · Accepted Answer · answered Oct 07 '14 at 17:58

you can use directive instead of ng-init:

app.directive('domLoaded', function($timeout) {
  return {
    link : function ($scope, $element, $attrs) {
      $timeout(function () {
        var row = $($element).parent().parent();
        console.log(row);
      });
    }
  };
});

usage:

cellTemplate = '<div class="fooProperty" dom-loaded ng-class="{\'foo_enabled\' : row.entity.foo, \'foo_disabled\' : !row.entity.hasFoo}"  ng-click="changeRole($event, \'foo\')" title="Foo Bar"></div>'

How do a grab a DOM element as soon as it has been loaded

1 Answers1