javascript - Angular.js 在指令中调用 jquery 函数

Question

在我的应用程序中，我试图调用 $('#accountTable').dataTable();这个功能在我的 Controller 中。但我认为它不像在 angular.js 中那样工作。试图在我的指令中调用此函数，但我没有工作。

我的指令:

'use strict'

app.directive('dataTableDirective', function () {
    return {
        restrict: "A",
        link: function (scope, elem, attrs) {
            $('#accountTable').dataTable();
        }
    }
});

Answer 1

如果您引用了 JQuery，Angular 在底层使用 JQuery。如果您不这样做，那么它会退回到称为 JQuery Lite 的精简版 JQuery。链接函数的 elem 参数已经是一个 JQuery 包装对象，表示您的指令附加到的元素。只需从那里调用插件，它应该可以正常工作。最好避免使用经典的 JQuery 选择器来导航 DOM，而是依靠 Angular 来提供您需要的元素。

确保在脚本引用中在 Angular 之前引用了 JQuery。

app.directive('dataTableDirective', function () {
  return {
    restrict: "A",
    link: function (scope, elem, attrs) {
      elem.dataTable();
    }
  };
});

Angular 需要在变化发生时知道变化。如果你分配了任何事件并需要更新范围变量，你需要确保 Angular 知道这些变化，方法是将它们包装在 scope.$apply 中。例如:

app.directive('dataTableDirective', function () {
  return {
    restrict: "A",
    link: function (scope, elem, attrs) {
      elem.on('order.dt', function (e) {
        scope.something = 'someValue';
      }).dataTable();
    }
  };
});

上面的代码将在作用域上设置 something 属性，但是因为事件是在 Angular 摘要循环之外触发的，所以绑定(bind)到 something 变量的任何 UI 可能不会出现更新。 Angular 需要被告知这个变化。您可以确保更改发生在这样的摘要周期中:

app.directive('dataTableDirective', function () {
  return {
    restrict: "A",
    link: function (scope, elem, attrs) {
      elem.on('order.dt', function (e) {
        scope.$apply(function () {
          scope.something = 'someValue';
        });
      }).dataTable();
    }
  };
});

然后在你的标记中:

<table data-data-table-directive>
  <!-- table contents -->
</table>

@supr 在评论中指出了这一点。请注意，该属性是 data-data-table-directive 而不是 data-table-directive。有一个 HTML 约定，你可以用 data- 开始任意属性，Angular 尊重它并忽略它。例如，您可以将 ng-click 放在一个元素上，或者您可以将 data-ng-click 放在一个元素上，它们的工作方式相同。它还支持 x-ng-click 作为另一种约定。

这与您非常相关，因为您的指令名称恰好以单词“data”开头，因此您需要在开头加倍使用 data-。希望这是有道理的。