Angularjs 使用ng repeat嵌套自定义指令

我是AngularJS的新人

我试图创建一个自定义指令，将jQuery-JScrollPane-JScrollPane.kelvinluck.com应用于div

我有以下html代码：

--->错 --->对 {{task.display_name} {{task.min_description}} 以及以下指令：

angular.module'myApp'，[]指令'scrollPane'，函数{ 返回{ 限制：'A'， 模板：， 链接：功能范围、elm、属性{ console.login指令； 元素。addClass“滚动窗格”； jScrollPane{showArrows:true，autoreinitialize:true}； }}; }; 主要的问题是模板的html覆盖了整个元素，而ng repeat根本不显示，并从最终的html中删除

创建指令的正确方法是用html包装内部html，在我的示例中，它将是div和class='scroll-pane'，我应该在哪里插入： $'.scroll pane'.jScrollPane

谢谢你的帮助

更新： 那么上面的代码就不起作用了， 问题出在HTML中，因为指令中应该有一个restrict:a。多亏了提示

为了应用jScrollPane，我只在指令中使用了

jScrollPane{showArrows:true，autoreinitialize:true}； 一切都对我有利，但我还有一个问题需要解决： 对于一些css解决方案，我必须获得ng repeat中任务的长度，以便为div设置一个固定的高度。 当我调试时，我看到它还没有渲染，

---

如何可能等到ng repeat获得数据？使用服务

AnguarJS指令有一个transclude的概念。如果要将指令中包含的html包装为父html，则需要使用transclude

所以你的指令定义会变成

angular.module'myApp'，[]指令'scrollPane'，函数{ 返回{ 限制：'E'， 替换：正确， 是的， 模板：， 链接：功能范围、elm、属性{ console.login指令； }}; };

---

查看指令的开发人员指南

AnguarJS指令有一个transclude的概念。如果要将指令中包含的html包装为父html，则需要使用transclude

所以你的指令定义会变成

angular.module'myApp'，[]指令'scrollPane'，函数{ 返回{ 限制：'E'， 替换：正确， 是的， 模板：， 链接：功能范围、elm、属性{ console.login指令； }}; };

---

查看指令的开发人员指南

也许您正在寻找transclude函数

angular.module'myApp'，[]指令'scrollPane'，函数{ 返回{ 限制：'E'， 是的， 模板：， 链接：功能范围、elm、属性{ console.login指令； } }; }; 这将把的内容放在模板的div中

我不确定在哪里放置$'.scroll pane'.jScrollPane； 可能在link函数中，使用角包装器。指令定义对象中的link函数实际上是一个post-link函数，它将在修改DOM后运行。这是一个安全的地方做额外的DOM修改

---

编辑：此答案的某些部分与问题的当前版本不匹配。例如，restrict:'E'

可能您正在寻找transclude函数

angular.module'myApp'，[]指令'scrollPane'，函数{ 返回{ 限制：'E'， 是的， 模板：， 链接：功能范围、elm、属性{ console.login指令； } }; }; 这将把的内容放在模板的div中

我不确定在哪里放置$'.scroll pane'.jScrollPane； 可能在link函数中，使用角包装器。指令定义对象中的link函数实际上是一个post-link函数，它将在修改DOM后运行。这是一个安全的地方做额外的DOM修改

编辑：此答案的某些部分与问题的当前版本不匹配。例如，限制：“E”