Angular指令无声地失败(指令过早渲染?)

时间:2013-11-14 22:59:47

标签: angularjs angularjs-directive

我有一个带有自定义元素指令(<uber-table>)的Angular应用。 <uber-table>应该采用一组对象,将它们渲染成<table>并添加一些功能(单击行以切换选定的基础对象,搜索实时过滤的搜索框,每行上的操作链接为每个对象定制单击回调())。我用相关代码创建了Plunker。请注意,Plunker提供了关于mapObject [object Object] has no method 'map')的错误,但在本地我没有收到任何错误。

后链接功能的element参数不是我预期的<uber-table>元素。相反,它是模板的<div class="uber-table">元素。这阻止我从<uber-table>中提取数据。我究竟做错了什么?任何帮助将不胜感激。

2 个答案:

答案 0 :(得分:0)

以下是一些问题的简要说明。

第一个主要问题是您希望已存在uber-table标记内的现有内容以及新模板。除非另有说明,否则本案中的现有内容(columns)将被覆盖。为了在具有模板的指令中包含现有内容,您需要设置transclude:true,然后在模板中标识需要使用ng-transclude在要作为内容的父元素的元素上放置此现有内容的位置

这是demo with transclude fixed

现在出现新问题,您尝试使用jQuery循环columns并返回angular attrs =&gt; column.attrs。这会引发未定义的错误。

我还没有试图解开这个问题,以解决列问题。它们应该由他们自己的指令处理

更新:这里是使用jQuery解析列数的slightly revised error free version。我担心这个结构会让我感到困惑。我认为不需要使用jQuery来解析colunms,这可以转换为指令或将列定义从控制器范围传递到main指令

答案 1 :(得分:0)

在尝试了几件事并再次查看文档后,我终于开始工作了。解决方案是将post-link函数放在compile函数中。此外,我必须更新我的孤立范围以使用=,将replace设置为true并将transclude设置为'element'

updated Plunker如果有人想看到这些变化。 Plunker版本不起作用,但由于它在本地工作,我不会花太多时间在它上面。