hasClass inside 指令总是返回 false答案

【问题标题】：hasClass inside directive always returning falsehasClass inside 指令总是返回 false
【发布时间】：2017-10-10 22:48:21
【问题描述】：

我在 HTML 端循环了 7 次：

<div ng-repeat="field in response.Fields">
    <input type="text" name="abc" ng-class="field.DataType == 'DATE' ? 'form-control datepicker' : 'form-control'" autocomplete="off" check-date />
</div>

在指令方面：

directive('checkDate', function () {
    return {
        restrict: 'A', //attribute only
        link: function (scope, elem, attr, ctrl) {
            console.log($(elem[0]).hasClass('datepicker')); // returning false
            console.log(elem[0].hasClass('datepicker')); // also returning false
        }
    };
});

当我知道 7 个字段中有 1 个确实获得了 .datepicker 类（我使用检查工具进行了验证）时，如何确保我的指令有效并为那个元素显示 true？

更新

我记录了元素，这就是我得到的

<input name="abc" ng-class="field.DataType == 'DATE' ? 'form-control datepicker' : 'form-control'" autocomplete="off" check-date="" class="ng-scope" type="text">

所以似乎在应用类之前检查是否发生。遇到这种情况，怎么解决？

【问题讨论】：

记录元素本身，看看它是否真的有类
如果您将 console.log() 语句包装在 $timeout() 中，它们是否正确检测到类？
@Huangism 已记录内容更新问题
@asprin 你能在你的指令中检查field.DataType吗？
@Lex 是的，2 秒的超时使其工作。

标签： jquery angularjs angularjs-directive

【解决方案1】：

您的指令在应用 ng-class 之前就已初始化。我可以看到解决这个问题的两种方法：

等待一个摘要周期以确保 ng-class 已被应用：

// inside your directive
$timeout(function() {
  console.log($(elem[0]).hasClass('datepicker')); // true
});

通过附加属性传递 field.DataType 并在指令中访问此值：

HTML:
<input ... check-date field-data-type="vm.field.DataType" />

JS:
directive('checkDate', function() {
  return {
    restrict: 'A',
    scope: {
      fieldDataType: '='
    },
    link: function (scope, elem, attr, ctrl) {
      console.log(scope.fieldDataType);  // "DATE"
    }
  };
})

第二种方式更可取。

【讨论】：