Question

我在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">

所以似乎检查是否在应用类之前发生了。在这种情况下，解决方案是什么？

Answer 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"
    }
  };
})

第二种方式更受欢迎。

hasClass inside指令总是返回false

更新

1 个答案: