如何在加载DOM元素后立即抓取它

时间:2014-10-07 15:50:08

标签: javascript angularjs ng-grid angularjs-ng-init

我正在处理一个角度应用程序,该应用程序在其中一个网格上使用ng-grid我有一个单元格模板,其ng-init函数附加到其中一个dom元素。

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

我在我的指令中为setIcon编写的代码是

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

我遇到的问题是,当ng-init函数触发时,我在TypeError: Cannot read property 'target'收到一条错误消息,指出var target = $event.target;未定义。

修改

所以问题是我无法在$event上使用ng-init,因为没有发生任何DOM事件。我现在的问题是如何编辑上面的代码以便在加载DOM元素时立即抓取它(基本上我需要知道onload的正确角度等效值)?

1 个答案:

答案 0 :(得分:2)

您可以使用指令代替ng-init:

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

用法:

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