我刚刚得到了我的指令来引入一个模板来附加到它的元素:
# 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>
Run Code Online (Sandbox Code Playgroud)
我还使用了一个名为DataTables的jQuery插件.它的一般用法是这样的:$('table#some_id').dataTable().您可以将JSON数据传递到dataTable()调用以提供表数据,或者您可以将数据放在页面上,然后它将完成其余的工作.我正在执行后者,将行放在HTML页面上.
但问题是我必须在DOM准备就绪之后调用表#line_items上的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>"
}
Run Code Online (Sandbox Code Playgroud)
我确实在div#sayboo中看到了"boo".
然后我尝试我的jquery数据表调用
.directive 'dashboardTable', ->
{
link: (scope,element,attrs) ->
console.log 'Just to make sure this gets run' …Run Code Online (Sandbox Code Playgroud) 有没有人对在角度应用程序中实现scrollspy的最佳方法有任何想法?我开始使用Twitter Bootstrap的实现,但我很难找到一个初始化(更重要的是在DOM更改后刷新)插件的好地方.
基本上我的控制器在加载数据时会对数据执行异步请求,并且在请求返回之前无法完全呈现DOM.然后,当完全呈现DOM时,需要刷新scrollspy插件.现在,一旦收到所需的数据,我的控制器就会在其范围内广播一个事件,并且我有一个指令来接收此事件.我不喜欢这个解决方案有两个原因
它只是觉得hacky.
当我在收到此事件后刷新scrollspy插件时,由于DOM未在周期的后期更新,因此它还为时尚早.我尝试了evalAsync,但最后我不得不使用超时,只希望DOM渲染得足够快.
我查看了Bootstrap插件的源代码,从头开始实现这一点似乎相当简单.我遇到的问题是,当我试图为它做一个指令时,我似乎无法从链接函数中收到的元素订阅滚动事件.
有没有人找到这样的好方法,或者有人有任何建议吗?我与使用Bootstrap实现没有任何关系,因为现在我在Bootstrap上唯一的dep是我刚刚添加的scrollspy-plugin.