How can I add text inside a DIV but not have it visible or using any space on my page?

Question

I have the following:

<div>{{ modal.data.text }}</div>

How can I hide the data that shows from view. I don't want it to have any height / width but some other reasons I want it to be added to the DOM.

Note the {{ are from AngularJS and it will substitute the {{ }} for some text when the page displays.

Answer 1

A more Angular-y way:

<div ng-hide="modal.data.text" ng-bind="modal.data.text"></div>

Explanation: The div will hide when modal.data.text evaluates to true (contains some text in your case), and will also bind the value of modal.data.text to the inner HTML of the div.

Answer 2

像这样：

<div style="display: none">{{ modal.data.text }}</div>

Answer 3

#mydiv {
   display:none;
}

<div id="mydiv">{{ modal.data.text }}</div>