Develop Reference

Binding complex rich text element in AngularJS

I'm trying to bind a complex, multiline rich text element with AngularJS, say something like:
<h1>Title</h1>
<p>Some content</p>
<p>More Content maybe with <i>italics</i> or <strong>bold</strong></p>
<p>Even links</p>
Now, when trying to render using a simple ng-bind-html it only binds the first element (in this example, the h1) and it does so inside a p tag, so the tag isn't applied, the rest is left below as a literal string.
How can I make it so Angular takes the entire multiline response and renders it accordingly?
Another issue I'm having is that if the HTML to render has some space before the line starts (that is, if it's at all tabulated) then it simply will print out the tab inside the tag and leave all the content as the string literal.

Replacing html in angular

I have a first div tag on a webpage. It contains some angular scope variables. I want to replace it with a second div tag which also contains some other angular scope variables when something happens.
The first way I tried is to use "ng-show". I add both the first and the second div on html and set the first div tag to be visible and second one to be invisible by using ng-show and ng-hide.
<div ng-show="showFirstDiv">
</div>
<div ng-hide="showFirstDiv">
</div>
When I change $scope.showFirstDiv from true to false within the relevant controller and call $scope.$apply(), the ng-show and ng-hide attribute values change (after using inspecting element in a browser).
However, the visibility of those two html tags did not change. The first div didn't disappear even with ng-show="false" and second div did not show up even with ng-hide="false".
What should I do? Is there a better way to replace a div with another div in angular while both divs contain angular scope variables?

Have you tried ngIf?
The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}.
<div ng-if="showFirstDiv">
</div>
<div ng-if="!showFirstDiv">
</div>

After appending some Content to Parent Div,Content not appending to Child Div using .html of jquery

I had added a div to 'parent of share button', and then i tried to append some span to 'share button'
1. $("#ShareBtn").parent().html("\\ i had appended some div code here");
2. $('#ShareBtn').html("\\some more code i added here");
but first action is successful,second one is failing..
can any one help me?

The first call would delete the #ShareBtn since jquery .html() replace all the elements contained inside the element, you would want to use .append() instead.
This is what's happening:
<div id="parent">
<div id="shareBtn"></div>
</div>
after you run this line
$("#ShareBtn").parent().html("\\ i had appended some div code here");
the element would look like this:
<div id="parent">
\\ i had appended some div code here
</div>
rendering the second line of code useless since the element ShareBtn doesn't exists anymore.

You have to know that $.html(); in jQuery doesn't append code, but replaces the innerHTML (see Javascript) of an element. In you code $('#ShareBtn') doesn't exist anymore after overwriting its parent content.

Serializing div

Trying to make kinda WISYWIG editor that creates a div with some inner elements. The div (with all the inner elements structure), once designed, should be serialized (somehow, hope it's the right term, into string and/or JSON), stored in DB and later inserted to DOM of some other HTML document.
Hence, the questions:
Which is the best way to serialize a div?
Which is the best way to de-serialize a div (and insert it to the DOM)?

You don't serialize the DIV, you serialize the form fields.
You simply grab the DIV and its contents and store these as HTML directly in the DB. It's basically the same as having HTML in a textarea.
You then just inser the HTML back into the DOM.

If you want to grab the HTML code of your DOM elements, you can use innerHTML. See this fiddle for an example:
HTML:
<div id='div1'>
<p>A Paragraph!</p>
<br/>
<p>Another p</p>
</div>
<button id='go'>Get HTML</button>
JS
document.getElementById('go').onclick = function(){
alert(document.getElementById('div1').innerHTML);
};

problem with event handlers in dojo

I have a span inside which i have a achor tag.For anchor tag , i have used DojoAttachEvent,Now somwhere in my code i replace innerHTML of span as show below.
<span id ="xyz"> <a dojoAttachEvent="onmouseover:_myfunction"> txt223 </a> </span>
Now i replace text of span as follows:
var tmptxt = dojo.byId("xyz").innerHTML
dojo.byId("xyz").innerHTML = "some more txt" +tmptxt
Now after running this code the function _myfunction doesnot get called when onmoveover gets triggered.
I know that i can get away with the problem by using two spans ,one for next txt and one for anchor , but due to some css issues(i get each span on new line,its some two colum css and if i use 2 spans txt and anchor come on 2 different line which we dont want) i cant do it.
I tried to use dojo.connect , but the problem is as my span is present in some wizard the event gets triggered when am on page other then the page which is the current page of wizard.

Try this code.it may helps.
<span id ="xyz"> <a dojoAttachEvent="onmouseover:_myfunction();return true;"> txt223 </a> </span>

First of all, if this isn't inside a widget template, dojoAttachEvent isn't what you want - you probably want something more like onMouseOver="_myfunction();".
Secondly, if you're replacing the innerHTML of the parent node of the node in question with the event, then naturally you're going to end up clobbering that node out of existence, and the event along with it, and you'd have to hook it up again one way or another. Is there a reason you can't be more careful with your DOM manipulation? Like, put an id on the a tag (or query for it from the span) and change only that node's innerHTML?