Develop Reference

JavaScript code doesn't work on dynamically generated html code

I am trying to run a JavaScript code after Angular template generated, but I find the JavaScript codes don't run on dynamic generated views.
For example, in this code div2 is generated by clicking on div1 and alert("aaa") runs by clicking on div1, but does not run when div2 is clicked.
body of index.html
<div id="div1" ng-init="showDiv2 = false">
<div class="alertonclick" ng-click="showDiv2 =true" style="background-color: red"><br/></div>
</div>
<div id="div2" ng-if="showDiv2">
<div class="alertonclick" style="background-color: green"><br/></div>
</div>
and script in index.html:
<script src="~/index.js"></script>
index.js
$(document).ready(function () {
$(".alertonclick").click(function () {
alert("aaaa");
});
});

The problem is that the association between class alertonclick and it's function is done when the page is loaded. But the div2 isn't created at that point. To fix this, one solution would be to use ng-show instead of ng-if:
<div id="div1" ng-init="showDiv2 = false">
<div class="alertonclick" ng-click="showDiv2 =true" style="background-color: red"><br/></div>
</div>
<div id="div2" ng-show="showDiv2">
<div class="alertonclick" style="background-color: green"><br/></div>
</div>
That way the div2 is generated from the beginning and has the alertonclick function but it's hidden.

The problem is that you put the click listener for the ".alertonclick" class, after the page was rendered. At that time the second div is not present in the DOM. A possible solution would be to reset the click listener after the second div is displayed.

ngShow not working with multiElement

I have the following rendered HTML:
<div class="tutorial-dot ng-hide" ng-show-start="currentStep">
<div class="dot"></div>
</div>
<div class="tutorial-modal" ng-show-end="">
As you can see, the ng-show-start element is hidden but the ng-show-end element is not. They should both have the same ngShow directive instance applied to them since it supports multiElement but the ngShow directive is not working properly on the ng-show-end element.

I was able to get this to work by removing the ng-hide class on the first div. I added some text just to see if the show was working. currentStep is not initialized so it will start hiding the the divs. When you click the button it will flip the value of currentStep to true with the ng-click.
<div class="tutorial-dot" ng-show-start="currentStep">
<div class="dot">Hello, this will show when the current step is true.</div>
</div>
<div class="tutorial-modal" ng-show-end>
This is the end
</div>
Here is a link to a codepen that demonstrates this working. If there are more questions about this fork my codepen and show the issue you are having. http://codepen.io/mkl/pen/PpMvzZ?#

Two ng-clicks on in same div

So I've been looking around for an answer for this but I just couldn't find the answer. So what I have is a ng-repeat of items that are in a particular class="list-items". When I click on each of the item in items, it should execute a function. Within each list I have an remove button which I would like to remove the item when clicked.
So some code for reference:
<div ng-click="executeCallback($index)" class="list-items">
<div class="item-info">
<span>some info here</span>
</div>
<button ng-click="removeItem($index)">X</button>
</div>
So I did right now, in my CSS, i tried using an position absolute on the button and a z-index of like 10000 to show that it is greater than, but when I click the removeItem button, it still calls the executeCallback function. I don't want it to call the executeCallback function.
Is there a way to have the removeItem function be called only when the remove button is clicked and not the parent class?

You can add multiple events in one ng-click.
<div ng-click="executeCallback($index)" class="list-items">
<div class="item-info">
<span>some info here</span>
</div>
<button ng-click="removeItem($index);$event.stopPropagation()">X</button>

Directives like ngClick and ngFocus expose a $event object within the scope of that expression. The object is an instance of a jQuery Event Object when jQuery is present or a similar jqLite object. Source
You can use this, directly in the HTML template, to stop its propagation by calling $event.stopPropagation(). Just add it on the button and you should be fine:
<button ng-click="removeItem($index);$event.stopPropagation()">X</button>

How does nested child directive root element working at the same level of the parent's directive root element?

Hello I’m currently in a situation which I can’t find the solution anywhere,
I would like to know how and if it’s possible to replace a directives root element’s content with one declared from a nested (child) directive.
<div id=”main”>
<nav>
<main-directive></main-directive>
</nav>
</div>
//mainDirective’s template
<div id=”mainDir>
<p>Hello World </p>
<child-directive></child-Directive>
</div>
//childDirective’s template
<div id=”childDir”>
<p>I conquered the world</p>
</div>
What I’m actually trying to do is, when I apply an ng-click from the mainDirective then the childDirective appears over the mainDirective replacing the position of the div where its located so in this case
will be replaced with the root element of the childDirective being
On a side note, when I click a back button, the childDirective hides and the parent's root element is shown again.
->mainDirective->onClick()->childDirective ->OnBackClick() ->mainDirective
an example where this occurs is from here and I am implementing something similar but I do not get the same results as in this source code and after breaking it all down I don’t see what I have wrong.
https://github.com/wuxiaoying/angular-multilevelpushmenu
I try at a much simpler level
plunker

So you can actually use simple JavaScript command:
//mainDirective’s template
<div id=”mainDir>
<p>Hello World </p>
<div id="childcontent"></div>
// This is the new DIV where the Content of the childDir div will be after clicking the button.
</div>
//childDirective’s template
<div id=”childDir”>
<p>I conquered the world</p>
</div>
So make a function which replaces the content from the div childcontent which the content of the childDir
function replacecontent()
{
document.getElementById('childcontent').innerHTML = document.getElementById('childDir').innerHTML;
}
Greetings

onchange event for <div> element when I have no control over when it is changed

I have a div element on a page that has other divs added to it when certain events happen. I do not know when these events happen, how they are triggered and how the other divs are added to the main div (its external so I have no idea whats happening all I have access to is the div).
How would I "monitor" for changes to the main div so an event is triggered whenever a new div is added ? I know I can use setInterval (which is what I'm doing now), but I really do not want to use it unless absoluley necessary. I would love to something as simple as form elements do with onchange but I have not found such for divs.
Example if text is not clear:
wesite.com/index.html ( the only thing I have access to)
<html>
<head></head>
<body>
<div id="theDiv">
</div>
</body>
</html>
and at times unknown to me divs get added to that div and it eventually looks like :
<html>
<head></head>
<body>
<div id="theDiv">
<div class="added"><p>Added Div</p></div>
<div class="added"><p>Added Div</p></div>
<div class="added"><p>Added Div</p></div>
<div class="added"><p>Added Div</p></div>
<div class="added"><p>Added Div</p></div>
</div>
</body>
</html>
And lets say I set up the event to trigger an alert, in this example I want to see an alert box every time a new div is added so by the time it looks like this I should have seen 5 alert boxes.
Sorry if this is difficult to follow..

The easiest way is to intercept the calls that are adding the children to the DIVs. Is this not an option?