javascript - Angular - 动态组件生成

Question

我希望通过使用模态作为示例的上下文来回答架构问题。因此，对于初学者来说，请不要用“使用 bootstrap 的模态服务”来回答这个问题。

基本上，我想知道当需要 html 凭空出现并向其应用组件或指令时，“Angular 方式”是什么。数据请求错误模式是一个很好的例子:例如，如果一个组件尝试加载某种数据，并且数据返回时出现某种错误，我希望数据服务能够以编程方式触发模式。

这就引出了一个问题:在这种情况下，模板去了哪里？除非我弄错了，否则不会为页面上没有的标记编译指令，从体系结构的 Angular 来看，这是可取的(例如，我不希望页面上的代码不太可能被使用，例如错误模式的情况并不常见)。服务必须附加到 Controller ，在同样的情况下，除非我在页面上有标记，否则不会添加 Controller 。

那么，激活一个在页面加载时本质上(在我看来，最好是)不存在的组件的模式是什么？理想情况下，我希望完全忽略模态组件，直到用户体验需要它。到目前为止，ng-if 语句(通过在页面上的某个位置包含一个 div)似乎是最好的方法。但即使这样在技术上也是“困惑的”，因为您向仅支持“潜在”情况的页面添加标记。

如果能够从某些服务或 Controller 或指令广播“triggerErrorModal”事件，向其传递一些参数，并让应用程序启动模态组件，那就太好了。请注意，在其他情况下这也可行，因此请将此视为一个更普遍的问题。

想法？

Answer 1

我知道你说过你不想只被发送到 Bootstrap 的模态服务。但是......查看源代码会提供大量有关如何执行此操作的信息。

基本上，您可以使用以下方法添加 HTML 元素:

var el = angular.element('<div class="new-thing"><my-directive></my-directive></div>')

将其添加到页面:

var body = $document.find('body').eq(0);
body.append(el)

然后编译它:

var compiled = $compile(el)($scope);