如何最好地将Dynatree树小部件包装在Angular Directive中?

时间:2013-03-27 01:55:25

标签: controller angularjs dynatree directive

我理解角度控制器和指令的基本功能,但我很难看到如何最好地应用它们来包装我们使用的Dynatree树小部件。

问题在于Dynatree通常有自己的方法通过ajax检索数据并填充自身 - 通常你通过调用它的“appendAjax”方法将数据附加到特定的树节点 - 即它的所有一个操作。 / p>

我知道我可以将对Ajax方法的调用分开并将其放在Controller中,将ajax调用的结果存储在我自己的树对象中 - 然后我可以在我的指令中查看对该treeobject的更改,然后更新手动使用Dynatree小部件。但是我正在处理的树数据庞大而复杂,当dynatree已经拥有自己的树结构时,必须在控制器中维护自己的树结构效率相当低。

我的感觉是,在这种情况下,我真的不需要一个控制器,而是我可以将Dynatree包装在一个指令中,并且基本上继续使用它,就像我一直使用它一样,但这似乎不起作用 - 这可能是我缺乏关于指令的角度知识的地方。所以我有几个问题:

1]在指令中进行任何类型的ajax调用被认为是不好的做法吗?

2]如果是这样,我应该如何包装喜欢以某种方式做事的第三方控件?我真的需要在我的控制器中维护自己的重复树结构吗?

3]如果认为在指令中进行Ajax调用是可以的,我如何确保ajax方法在指令中运行? (我假设这是我的问题的原因)

3 个答案:

答案 0 :(得分:2)

如果有任何帮助,这里是我们在directive中使用的hawtio将jquery dynatree包装为AngularJS指令。

这是source code(它在TypeScript中,但你应该得到这个想法;它主要是JavaScript)。

答案 1 :(得分:0)

1]在指令中进行任何类型的ajax调用被认为是不好的做法吗?

我不这么认为。如果是这样,Angular将没有“controller”属性,您可以在其中添加任意代码,包括Ajax调用。在这里查看我的博客文章 http://theocdcoder.com/guide-angularjs-directives-part/

2]如果是这样,我应该如何包装喜欢以某种方式做事的第三方控件?我真的需要在我的控制器中维护自己的重复树结构吗?

我认为最好的选择是创建一个包装Ajax调用的服务,并从link方法调用服务。在此之前,您需要通过链接函数中的JQuery / Javascript代码初始化Dynatree,将事件侦听器添加到Dynatree事件中,这些事件将存在于您的链接函数中。在这些事件侦听器中,您可以根据需要进行更多Ajax调用或修改dom。您还可以添加$ attr。$ observe或$ scope。$ watch来收听来自外部的更改。使用$ scope。$ broadcast与父控制器或范围绑定进行通信,以调用控制器函数的方法。

3]如果认为在指令中进行Ajax调用是可以的,我如何确保ajax方法在指令中运行? (我假设这是我的问题的原因)。 有关示例,请参阅我的博文。

您可以发布JSFiddle以获得更清晰的信息。

答案 2 :(得分:0)

我遇到了类似的问题并得出了同样的结论。我的ajax调用在我的指令加载后返回,因此指令结束时根本没有数据。为此我有4个解决方案,其中我认为最后一个可能是最好的。

  1. 在ajax调用成功时插入指令。您可以创建一个angular.element(“myDirective”),然后将其插入DOM,然后对该元素运行$(compile)。从ajax调用返回的数据可以存储在控制器中,也可以存储在常量或本地存储中,也可以存储在您能想到的任何内容中。
  2. 创建同步通话......我知道可怕的
  3. 完成ajax调用后重新编译指令。与1类似,但在这种情况下,我们运行指令两次而不是一次。
  4. 树的.children属性可以通过在ajax调用成功时启动的观察者来设置。不确定dynatree的api是否有动态插入数据的方法?我认为它不确定