Question

每次选择文本时，我都会获得工具提示类型弹出窗口。问题是角度没有通过角度指令识别动态添加的HTML，除非它们被重新编译???我有代码修改控制器中的DOM，创建一个文本框，然后销毁它。显然，Angular的方式是在指令中完成这样的工作。我应该如何更改我的代码以执行与下面相同的操作，除非在指令中使用DOM操作???

JS

argapp.controller("AnnotateCtrl", function($scope) {

$scope.newBox = function( rect ) {

    var div = document.createElement('div');   // make box
    div.setAttribute("class", "shortbox");
    div.setAttribute("ng-controller", "EditCtrl");
    div.setAttribute("ng-mouseover", "hoverside()");
    div.style.border = '2px solid black';      // with outline
    div.style.position = 'fixed';              // fixed positioning = easy mode
    div.style.top = rect.bottom + 5 + 'px';       // set coordinates
    div.style.left = rect.left + 10 + 'px';
    div.style.height =  '25px'; 
    div.style.width = '64px';
            div.innerHTML = "<ng-someOtherthing>"
    document.body.appendChild(div); 

};

$scope.annotate = function() {

    if ( getSelectedText() != "" ) {                        
        killBoxes(); 
        var selection   =   window.getSelection();
        var range       =   selection.getRangeAt(0);
        var rect        =   range.getBoundingClientRect();
        $scope.newBox(rect);
        window.setTimeout( killBoxes, 3000);
    }
};

}）

HTML

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

Answer 1

因此，为了做到这一点，您需要使用$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>

这里是fiddle。

如果您更喜欢更改课程，可以使用ngClass指令进行更改。 Angular表达式的强大功能意味着您甚至不需要修改其他逻辑。请参阅以下示例：

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

Angular创建动态DOM元素

1 个答案: