AngularJS 与 MVC 动态获取 html，附加到正文，并绑定控制器答案

【问题标题】：AngularJS with MVC dynamically get html, append to body, and bind a controllerAngularJS 与 MVC 动态获取 html，附加到正文，并绑定控制器
【发布时间】：2016-04-05 21:02:00
【问题描述】：

我是具有 jQuery 背景的 AngularJS 新手。对于我认为是一项简单的任务，我发现它变得越来越困难。我已经查看了如何动态添加 html 并绑定到控制器，但我还没有找到我的特殊情况。

这就是我想要完成的。我现在想用一个简单的对话框来保持简单。基本上，假设我想创建自己的自定义对话框。假设基于按钮单击，我想显示消息“你确定你想要某某”，按钮是“是”、“否”、“取消”。然后根据按钮的点击，我想执行一个具体的操作，windows开发的用户会很熟悉的。

首先，我必须根据单击的按钮构造我的消息和对话框 html，将该输出 html 作为绝对位置附加到文档正文，然后在完成此操作后从文档正文中删除 html。

在 jQuery 中我可以简单地做到这一点

...somewhere in code
var html = "<div id='123' class='dialog-box'><button id='yesButton'></button>
...elements for no and cancel</div>";
DisplayDialog("123", html);
...

function DisplayDialog(elementId, html) {
    $(document.body).append(html);
    var dElement = $(document.body).find("#" + elementId);
    $(dElement).find("#yesButton").on("click" function () {
        ...code
        $(dElement).remove();
    });
    ...code for no, and cancel events
}

我只是无法理解如何以角度方式做到这一点。基本上，我希望能够获取 html，将其附加到某处（无论是在正文中，还是在 div 元素中等），并能够使用 $scope.我暂时保持简单的对话框，如果我能理解这一点，我可以应用到更复杂的操作，我可能需要在我的 MVC 应用程序中检索部分视图并将其附加到 div

【问题讨论】：

标签： javascript jquery html angularjs asp.net-mvc

【解决方案1】：

它的角度非常简单，考虑到 jquery 背景，这对你来说应该不难：

var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.append('Hi<br/>');

https://docs.angularjs.org/api/ng/function/angular.element

另一种方式：

然后在 html 中使用 ng-bind 并将其设置为代表 html 的 $scope 变量：

<div ng-bind-html="divHtmlVar"></div>

$scope.divHtmlVar = '<b>main html</b>';