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!');
    }
      }
    }
  };
});

来自angular docs的解释

想要修改DOM的指令通常使用链接选项。 link采用具有以下签名的函数，函数链接（范围，元素，attrs）{...}其中：

范围是一个Angular范围对象。
元素是此指令匹配的jqLite包装元素。
attrs 是一个哈希对象，具有标准化属性名称及其对应的键值对属性值。

从AngularJS Directive获取HTML元素类

1 个答案: