Angular Creating Dynamic DOM element

Question

I've got a tooltip type popup everytime text is selected. The problem is angular doesn't recognized dynamically added HTML with angular directives unless they're compiled??? I've got code that modifies the DOM in the controller, creates a textbox and then destroys it. Apparently the Angular way is to do such work in a directive. How should I change my code to do the same as it does below except with the DOM manipulation in a directive???

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>

Brandon Horst · Accepted Answer · 2014-06-11 10:13:17Z

1

So in order to do this, you need to use $compile and $link. It is possible, but it's unnecessary in this case.

Your controller should not be making insertions into the DOM. In this case, you should put your markup on the page, and set ngShow to be a variable set by the ngMouseup. You don't even need any Javascript for this, actually.

<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>

Here's a fiddle.

If you'd prefer to change a class, you can do so using the ngClass directive. The power of Angular expressions means that you don't even need to modify the other logic. See the example below:

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

edited Jun 11, 2014 at 10:13

answered Jun 10, 2014 at 22:07

Brandon Horst

2,0701 gold badge18 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Worf Over a year ago

The popup div actually needs to popup somewhere near the text. And then disappear or be destroyed a few seconds later as executed by my killBoxes() function.

Brandon Horst Over a year ago

That should be done with CSS. You can make it disappear by setting the showPopup variable to false in a setTimeout call.

Worf Over a year ago

Wouldn't changing the style in JS still have to be done in some directive since I'm modding the DOM? I don't need it to just work... I already have the functionality working in JQuery... I want to do this in the Angular way.

Brandon Horst Over a year ago

Nope - just show and hide it with CSS. I added an example that involves changing the class. In all my experience with angular, I have never seen a time that requires inserting into or removing from the DOM - routing, showing/hiding, or modifying classes has always been enough. Try to step out of the jQuery mindset.

Collectives™ on Stack Overflow

Angular Creating Dynamic DOM element

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related