Gibt es einen Rückruf nach dem Rendern für die Angular JS-Direktive?
Ich habe gerade meine Direktive dazu gebracht, eine Vorlage einzufügen, um sie wie folgt an ihr Element anzuhängen:
# CoffeeScript
.directive 'dashboardTable', ->
controller: lineItemIndexCtrl
templateUrl: "<%= asset_path('angular/templates/line_items/dashboard_rows.html') %>"
(scope, element, attrs) ->
element.parent('table#line_items').dataTable()
console.log 'Just to make sure this is run'
# HTML
<table id="line_items">
<tbody dashboard-table>
</tbody>
</table>
Ich benutze auch ein jQuery-Plugin namens DataTables. Die allgemeine Verwendung ist wie folgt: $ ('table # some_id'). DataTable (). Sie können die JSON-Daten an den Aufruf dataTable () übergeben, um die Tabellendaten bereitzustellen, oder Sie können die Daten bereits auf der Seite haben, und der Rest wird erledigt. Letzteres mache ich, wenn die Zeilen bereits auf der HTML-Seite sind .
Das Problem ist aber, dass ich die dataTable () in der Tabelle # line_items AFTER DOM ready aufrufen muss. Meine obige Anweisung ruft die dataTable () -Methode auf, BEVOR die Vorlage an das Element der Anweisung angehängt wird. Gibt es eine Möglichkeit, nach dem Anhängen Funktionen aufzurufen?
Danke für deine Hilfe!
UPDATE 1 nach Andys Antwort:
Ich möchte sicherstellen, dass die Link-Methode erst aufgerufen wird, nachdem sich alles auf der Seite befindet. Deshalb habe ich die Direktive für einen kleinen Test geändert:
# CoffeeScript
#angular.module(...)
.directive 'dashboardTable', ->
{
link: (scope,element,attrs) ->
console.log 'Just to make sure this gets run'
element.find('#sayboo').html('boo')
controller: lineItemIndexCtrl
template: "<div id='sayboo'></div>"
}
Und ich sehe in der Tat "boo" im div # sayboo.
Dann versuche ich meinen jquery datatable call
.directive 'dashboardTable', ->
{
link: (scope,element,attrs) ->
console.log 'Just to make sure this gets run'
element.parent('table').dataTable() # NEW LINE
controller: lineItemIndexCtrl
templateUrl: "<%= asset_path('angular/templates/line_items/dashboard_rows.html') %>"
}
Kein Glück da
Dann versuche ich eine Auszeit hinzuzufügen:
.directive 'dashboardTable', ($timeout) ->
{
link: (scope,element,attrs) ->
console.log 'Just to make sure this gets run'
$timeout -> # NEW LINE
element.parent('table').dataTable()
,5000
controller: lineItemIndexCtrl
templateUrl: "<%= asset_path('angular/templates/line_items/dashboard_rows.html') %>"
}
Und das funktioniert. Also frage ich mich, was in der Nicht-Timer-Version des Codes schief geht?