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

Question

我正在开发一个在其中一个网格上使用 ng-grid 的 Angular 应用程序我有一个单元格模板，其中一个 dom 元素附加了一个 ng-init 函数。

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' of undefined at var target = $event .目标；。

编辑:

所以问题是我不能在 ng-init 上使用 $event，因为没有 DOM 事件发生。我现在的问题是如何编辑上面的代码以在 DOM 元素加载后立即抓取它(本质上我需要知道 onload 的正确 Angular 等价物)？

Answer 1

你可以使用指令代替 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>'