Angular.js在Directive中调用jquery函数

Question

在我的应用程序中，我试图调用$（'＃accountTable'）。dataTable（）;我的控制器中的这个功能。但我认为它在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版本上。 link函数的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摘要周期之外触发的，因此绑定到something变量的任何UI可能都不会更新。角度需要被告知变化。您可以确保在摘要周期中发生更改，如下所示：

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-。希望这是有道理的。