当前位置: 首页 > 面试题库 >

Angular JS指令有后期渲染回调吗?

仲孙鸿飞
2023-03-14
问题内容

我刚刚得到了指令,以插入一个模板以附加到其元素,如下所示:

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

我还使用了一个名为DataTables的jQuery插件。它的一般用法是这样的:$(’table#some_id’)。dataTable()。您可以将JSON数据传递到dataTable()调用中以提供表数据,或者可以将数据存储在页面上,其余的将进行处理。.我正在做后者,HTML页面上已经有行。

但是问题是我必须在table #line_items AFTER
DOM就绪后调用dataTable()。我上面的指令在将模板附加到指令的元素之前,先调用dataTable()方法。有没有一种方法可以在追加之后调用函数?

谢谢您的帮助!

安迪回答后的更新1:

我想确保链接方法仅在页面上所有内容之后都被调用,因此我更改了指令进行了一些测试:

# 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中看到了“ boo”。

然后我尝试我的jQuery数据表调用

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

那行得通。因此,我想知道非计时器版本的代码出了什么问题?


问题答案:

如果未提供第二个参数“ delay”,则默认行为是在DOM完成渲染之后执行该功能。因此,请使用$ timeout而不是setTimeout:

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


 类似资料:
  • 问题内容: 渲染模板后如何运行方法?我要设置和之后,我需要使用JQuery进行更改(例如,在模板内容的DOM中)。正在“之前”渲染工作(模板的DOM尚不可用)。谢谢。 问题答案: 创建在链接函数中运行代码的指令。构建模板后,将调用链接功能。 请参阅ng-click以获取想法。

  • 问题内容: 我想通过标签上的参数将调用发送回指令,然后在指令内部适当时调用该方法。例如,当单击按钮时,调用父控制器上的方法。 我有一个简单的问题,它无法正常工作 html文件: javascript文件: 问题答案: 棘手的棘手角度,在HTML中声明参数时,需要使用蛇形大小写而不是驼峰形匹配。 作品: 不起作用:

  • 问题内容: 我正在使用SVG和angular.js进行大型项目,并且需要对svg指令模板的坚实支持。不幸的是,当angular渲染模板时,它将创建DOM节点,而不是SVG节点。我当前的解决方法是使用jquery.svg自己管理创建和删除节点,但是它受到限制。示例:http://plnkr.co/edit/Xk8wM3?p = preview 我想让指令成为实际的svg元素,而不是一些没有任何实际作

  • 问题内容: 我创建了一个生成Twitter按钮的指令。由于这些按钮上的作用域变量可能会更改,因此我需要在按钮发生时重新构建它。目前,我正在使用jQuery 链接元素并重建按钮。 有没有办法让指令完全重新呈现模板呢? 问题答案: 这是一个可重用的指令,您可以使用它在发送事件时重建被包含的内容: 这是一个jsFiddle演示其工作原理:http : //jsfiddle.net/robianmcd/Z

  • 问题内容: 我有一个看似简单的问题,没有明显的解决方案 (通过阅读Angular JS文档) 。 我有一个Angular JS指令,该指令根据其他DOM元素的高度进行一些计算,以定义DOM中容器的高度。 指令内部发生了类似的事情: 问题是当指令运行时,找不到它,返回一个空数组而不是我需要的jQuery包装的DOM元素。 我是否可以在指令中使用仅在加载DOM之后运行的回调,并且可以通过常规jQuer

  • 问题内容: 我正在尝试在Angular中实现d3指令,这很困难,因为在视觉上什么也没有发生,并且在控制台上没有抛出任何错误。 这是我的d3指令: 这是我的HTML: 起初我以为不是要附加,因为要检查看起来像的元素,但是现在我认为该指令根本没有在运行。我从一开始就将其嵌入其中,也没有出现。我缺少简单的东西吗? 编辑: 我尝试将顶行更改为 但这也不起作用。我什至不知道两个标题之间有什么区别… 问题答案