How to create Div structure with angular

Question

What i want to do is when i click for example on some button with binded function like this, it will create whole DOM element structure for private chat window purpose

$scope.openPrivateChatWindow = function () {
    //here i want to do some coding to create whole div structure
}

With jQuery i will do something like this

function openPrivateChatWindow() {
    var div = '<div id="' + ctrId + '" class="ui-widget-content draggable" rel="0">' +
          <div class="header">' +
               '<div  style="float:right;">' +
                    '<img id="imgDelete"  style="cursor:pointer;" src="/Images/delete.png"/>' +
                        '</div>' +
                        '<span class="selText" rel="0">' + userName + '</span>' +
                        '<span class="selText" id="msgTypeingName" rel="0"></span>' + 
                '</div>' +
                    '<div id="divMessage" class="messageArea">' +
                    '</div>' +
                    '<div class="buttonBar">' +
                        '<input id="txtPrivateMessage" class="msgText" type="text"   />' +
                        '<input id="btnSendMessage" class="submitButton button" type="button" value="Send"   />' +
          '</div>' +
                    '<div id="scrollLength"></div>' +
   '</div>';
}

is there something how i can archieve this using angular and if it is, what is the best way how to do that, for example if i can load some html template for that or do it like i showed right up here with jQuery

Take a look at angular components, they can use a separate template file which makes reading your code a lot nicer than your current approach, I would also go down the route of abstracting any HTML / DOM manipulation into an angular service, this way you can swap that out without breaking your app docs.angularjs.org/guide/component — Dale
– Dale, Commented Dec 30, 2016 at 14:56
Creating DOM elements on the fly is not very performant. You want to use a custom angular directive with its own template and display it once user interacts with your UI. — codeepic
– codeepic, Commented Dec 30, 2016 at 14:59

JSNinja · Accepted Answer · 2016-12-30 14:58:52Z

1

You should not add html nodes to the DOM from the within the controller. Either use a custom directive or just hide your div using ng-if and make it appear on button click.

$scope.isChatHidden = true;
$scope.openPrivateChatWindow = function () {
    $scope.isChatHidden = false;
}


<div ng:if="isChatHidden">
     Other DOM Elements
</div>

answered Dec 30, 2016 at 14:58

JSNinja

7156 silver badges19 bronze badges

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

3 Comments

Dale Over a year ago

Nice simple approach, though I am more a fan of the data-ng-if style, this will work just as well

JSNinja Over a year ago

Simple is good, I prefer x:ng:if style. Less key presses and colon is easier to find on the keyboard. lol I'm lazy ;)

Martin Over a year ago

This looks pretty simple, so basically i will just insert my html code for private chat box into my ng-repeat div where i display all online users which are logged in my app. Thats rly cool, thanks

Collectives™ on Stack Overflow

How to create Div structure with angular

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related