從AngularJS指令獲取HTML元素類

Question

我有如下所示的AngularJS代碼塊：

<ion-list can-swipe="true">
  <ion-item ng-repeat="item in items" simplify-item>
    <div class="row" style="background-color:orange;">
      Hello
    </div>
  </ion-item>
</ion-list>

指令來自離子框架。 不過，我仍在嘗試為此添加自己的指令。 我想通過一個名為“ simplify-item”的屬性來設置CSS屬性。 我的實現此目的的指令如下所示：

myApp.directive('simplifyItem', function() {
  return {
    restrict:'A',
    link: function(element) {
      console.log('linking element');
      if (element === null) {
        console.log('element is null');
      } else {
    var result = element.hasClass('item-complex');
    if (result === null) {
      console.log('result is null.');
    } else {
      console.log('Sweet!');
    }
      }
    }
  };
});

當行var result = element.hasClass('item-complex'); 被執行，我得到一個例外。 異常說明：

undefined is not a function

我不明白為什么我不能這樣做。 我究竟做錯了什么？

Answer 1

這樣嘗試

myApp.directive('simplifyItem', function() {
  return {
    restrict:'A',
    link: function(scope , iElement, iAttrs) {
     var element = iElement;
      console.log('linking element');
      if (element === null) {
        console.log('element is null');
      } else {
    var result = element.hasClass('item-complex');
    if (result === null) {
      console.log('result is null.');
    } else {
      console.log('Sweet!');
    }
      }
    }
  };
});

角度文檔的解釋

想要修改DOM的指令通常使用link選項。 link采用具有以下簽名的函數，函數link（scope，element，attrs）{...}其中：

• scope是Angular作用域對象。
• element是此偽指令匹配的jqLit​​e包裝的元素。
• attrs是一個哈希對象，具有標准化屬性名稱及其對應的屬性值的鍵-值對。