Angular.js在指令中調用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的精簡版本。 鏈接函數的elem參數已經是一個JQuery包裝的對象，該對象表示您的指令附加到的元素。 只需從那里調用插件，它就可以正常工作。 最好避免經典的JQuery選擇器瀏覽DOM，而是依靠Angular提供所需的元素。

確保腳本引用中的Angular 之前引用了JQuery。

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

Angular需要知道變化發生的時間。 如果您分配了任何事件並需要更新范圍變量，則需要通過將它們包裝在scope.$apply來確保Angular知道這些更改。 例如：

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可能都不會更新。 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-開頭加倍。 希望這是有道理的。