angularjs - Angular - 可重用对话框

Question

我需要构建一个与项目列表中的任何项目一起使用的对话框。无论项目如何，该对话框几乎都是相同的，除了显然与项目相关的字段值之外。

我正在构建的指令是从文件中读取模板，使用 $compile 对其进行编译，然后将其绑定(bind)(链接)到项目的范围。绑定(bind)的结果是一棵 DOM 树。为了使对话框可见，我需要将此树附加到现有 DOM 中的某个元素。我的对话框的性质使得将其直接附加到正文标记是有意义的。该对话框将与列表中的不同项目结合使用多次

所以我的问题是:这个过程(编译、绑定(bind)、追加)有多少可以提前完成？我当然可以运行一次编译。我还可以将编译结果绑定(bind)到 $rootscope 并将其附加(隐藏)到 body 标记。这样我以后就可以打开可见性并显示对话框。

但是，如果它已经绑定(bind)并附加到 DOM，那么将其重新绑定(bind)到其他范围是否合理？如果是的话 - 正确的方法是什么？另一个问题是值得吗？可能只是在每次需要时重新插入？

Answer 1

如果您一次只会显示一个这样的对话框，并且您会经常使用它，则不必将其重新绑定(bind)到另一个作用域，只需更改作用域上的数据即可。像这样的事情:

1. 为您的对话框创建服务
2. 创建指令并将您的服务注入(inject)其中。当链接函数执行时，将 $scope.dialogData 之类的内容传递给服务，以便服务可以更新数据。
3. 创建一个 Controller 来注入(inject)服务。通过服务设置对话框数据来显示对话框。由于您正在修改 Controller 中指令范围内的数据，因此 Angular 会注意到这一点并更新您的对话框。
4. 在对话框包装器上添加 ng-show，以便轻松在服务上实现 open()/close() 方法。

现在您有了一个可以在系统中的任何位置使用的对话框，并且您只需重复使用相同的指令，而不必弄乱 DOM 或编译。