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引擎蓋下，如果你已經JQuery的引用。如果你不這樣做，那麼它會回退到一個名爲JQuery Lite的更簡單的JQuery版本。鏈接函數的elem參數已經是一個JQuery包裝對象，表示您的指令附加到的元素。只需從那裏調用插件，它應該可以正常工作。最好避免使用傳統的JQuery選擇器來瀏覽DOM，而是傾向於使用Angular來提供所需的元素。

請確保您的腳本引用中有Angular參考，並在之前引用了。

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

角度需要知道變化發生的時間。如果您指定了任何事件並需要更新範圍變量，那麼您需要確保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屬性，但由於事件被觸發的角消化週期之外，結合到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-加倍。希望這是有道理的。