加載DOM元素后如何抓取

Question

我正在一個使用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;處未定義的TypeError: Cannot read property 'target' var target = $event.target; 。

編輯：

因此，問題在於我無法在ng-init上使用$event ，因為沒有DOM事件發生。 現在我的問題是，如何編輯上面的代碼以在DOM元素加載后立即獲取它（本質上，我需要知道onload的適當角度等效項）？

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