2

我了解 Angular 控制器和指令的基本功能，但我正在努力了解如何最好地应用它们来包装我们使用的 Dynatree 树小部件。

问题是 Dynatree 通常有自己的方式通过 ajax 检索数据并填充自身 - 通常您通过调用其“appendAjax”方法将数据附加到特定树节点来执行此操作 - 即它的全部操作。

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

我的感觉是，在这种情况下，我真的不需要控制器，相反，我可以将 Dynatree 包装在一个指令中，并基本上按照我一直使用它的方式继续使用它，但这似乎不起作用 - 而这个可能是我缺乏关于指令的 Angular 知识的地方。所以我有几个问题：

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

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

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

4

3 回答 3

2

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

这是源代码（它在 TypeScript 中，但你应该明白；它主要是 JavaScript）。

于 2013-04-10T14:40:04.083 回答
0

我遇到了类似的问题并得到了相同的结论。加载指令后，我的 ajax 调用返回，因此指令以没有数据结束。为此，我有 4 个解决方案，我相信最后一个可能是最好的。

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

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

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

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

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

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

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

于 2013-03-27T02:51:45.613 回答