Angularjs 创建动态DOM元素

每次选择文本时，我都会弹出一个工具提示类型的弹出窗口。问题是angular不能识别带有angular指令的动态添加HTML，除非它们被编译？？？我有一些代码可以修改控制器中的DOM，创建一个文本框，然后销毁它。显然，有角度的方法是在指令中做这样的工作。除了指令中的DOM操作外，我应该如何更改代码以执行与下面相同的操作

JS

argapp.controller（“注释控制”，函数（$scope）{
$scope.newBox=函数（rect）{
var div=document.createElement（'div'）；//生成框
div.setAttribute（“类”、“短框”）；
div.setAttribute（“ng控制器”、“编辑控制”）；
setAttribute（“ng mouseover”、“hoverside（）”）；
div.style.border='2px纯黑'；//带轮廓
div.style.position='fixed'；//fixed positioning=easy模式
div.style.top=rect.bottom+5+'px'；//设置坐标
div.style.left=rect.left+10+'px'；
div.style.height='25px'；
div.style.width='64px'；
div.innerHTML=“”
文件.正文.附件（div）；
};
$scope.annotate=函数（）{
如果（getSelectedText（）！=“”）{
killbox（）；
var selection=window.getSelection（）；
var range=selection.getRangeAt（0）；
var rect=range.getBoundingClientRect（）；
$scope.newBox（rect）；
设置超时（Killbox，3000）；
}
};

})

HTML

我可以被选中。

让我们看看它是如何工作的。

因此，要做到这一点，您需要使用

$compile

和

$link

。这是可能的，但在这种情况下没有必要

您的控制器不应该在DOM中进行插入。在这种情况下，您应该将标记放在页面上，并将

ngShow

设置为

ngMouseup

设置的变量。实际上，您甚至不需要任何Javascript来实现这一点

<div ng-controller="AnnotateCtrl" ng-mouseup="showPopup = true" id="tate">
I can be selected.<br>
Lets see how this works.<br>
</div>
<div class="shortbox" ... ng-show="showPopup">...</div>

---

popup div实际上需要在文本附近的某个地方弹出。然后消失或在几秒钟后被销毁，正如我的killbox（）函数所执行的那样。这应该通过CSS来完成。在

setTimeout

调用中将showPopup变量设置为false可以使其消失。既然我正在修改DOM，那么在JS中更改样式是否还需要在某些指令中完成？我不需要它只是工作。。。我已经有了在JQuery中工作的功能。。。我想用角度的方式来做这件事。不，只是用CSS来显示和隐藏它。我添加了一个涉及更改类的示例。在我使用angular的所有经验中，我从未见过需要插入DOM或从DOM中移除的时间-路由、显示/隐藏或修改类总是足够的。尝试走出jQuery思维模式。

<div ng-controller="AnnotateCtrl" ng-mouseup="annotate()" id="tate">
I can be selected.<br>
Lets see how this works.<br>
</div>

<div ng-controller="AnnotateCtrl" ng-mouseup="showPopup = true" id="tate">
I can be selected.<br>
Lets see how this works.<br>
</div>
<div class="shortbox" ... ng-show="showPopup">...</div>

<div class="shortbox" ... ng-class="showPopup ? 'visible' : 'notVisible'">...</div>