Question

我是一名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

Answer 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>';

带MVC的AngularJS动态获取html，附加到body，并绑定控制器

1 个答案: