有没有后期渲染回调角JS指令？ [英] is there a post render callback for Angular JS directive?

问题描述

我刚刚拿到我的指令在模板中拉追加到这样的元素：

I 've just gotten my directive to pull in a template to append to its element like this:

# 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>

我也使用jQuery插件称为数据表。它的一般用法是这样的：$（'＃表SOME_ID'）的dataTable（）。您可以在JSON数据传递到DataTable中（）调用提供表数据或你已经可以在页面上的数据，它会做休息..我做了后者，具有行已经在HTML页面上

I am also using a jQuery Plugin called DataTables. The general usage of it is like this: $('table#some_id').dataTable(). You can pass in the JSON data into the dataTable() call to supply the table data OR you can have the data already on the page and it will do the rest.. I am doing the latter, having the rows already on the HTML page.

但问题是，我要调用DataTable（）在桌子上＃line_items后DOM准备就绪。前模板追加到指令的元素我上面的指令调用数据表（）方法。有没有一种方法，我可以调用函数追加后？

But the problem is that I have to call the dataTable() on the table#line_items AFTER DOM ready. My directive above calls the dataTable() method BEFORE the template is appended to the directive's element. Is there a way that I can call functions AFTER the append?

感谢您的帮助！

安迪的回答后更新1：

我要确保链接方法不只有被调用后一切都在页面上，所以我改变了指令来一个小测试：

I want to make sure that the link method does only get called AFTER everything is on the page so I altered the directive for a little test:

# 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>"

    }

和我的确看到嘘的DIV＃sayboo。

And I do indeed see "boo" in the div#sayboo.

然后我尽我的jQuery的数据表通话

Then I try my 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') %>"
    }

没有运气

然后我尝试添加超时：

.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') %>"
    }

和工程。所以，我不知道在code的非计时器版本出现问题？

And that works. So I wonder what goes wrong in the non-timer version of the code?

推荐答案

如果没有提供第二个参数，延时，默认行为是在DOM渲染完毕后执行的功能。因此，不是的setTimeout的，使用$超时：

If the second parameter, "delay" is not provided, the default behaviour is to execute the function after the DOM has completed rendering. So instead of setTimeout, use $timeout:

$timeout(function () {
    //DOM has finished rendering
});

这篇关于有没有后期渲染回调角JS指令？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！