<https://lh3.googleusercontent.com/-AFUINmyaDlM/VDdxuRw2_dI/AAAAAAAAAFk/t0Wxsba0Fas/s1600/Plunker.png>
I've distilled my problem into *a simple example here:* http://plnkr.co/edit/q2UKGOJr7AgFF84CbYiW?p=preview *Intro* I have two directives, '*button*' and '*ui-sref*'. (Colour coded for your convenience.) *Button* creates it's own child element and pops the *ui-sref* directive on it. The *ui-sref* directive will show an alert on the screen when clicked. The *button* also has an attribute called *locked* which when set to true, destroys its child element and substitutes something else in it's place. Set it to false and will destroy the new child and place a child back with *ui-sref *on it. Simple enough, that's what I'm expecting anyway. The following works as intended: If I create a *ui-sref*, clicking brings up the alert. If I create a *button*, it makes a *ui-sref* and clicking on that brings up the alert. If I change the *locked* attribute on the *button* (toggled with a checkbox in the example), the *ui-sref *is destroyed and replaced with a div tag reading 'locked'. If I uncheck the checkbox, *locked* is set back to false, the locked text is removed and a new *ui-sref *is put back. *Something is amiss* When the new *ui-sref* is created, it isn't created properly (even though others already on the page work fine). Inside the *ui-sref*'s link function, click handlers are bound to the element to bring up the alert as you can see here: link: function(scope, elem, attrs) { elem.bind('click', function() { window.alert('button click'); }); console.log(elem); elem.css('color','red'); ... But clicking does nothing?! I inserted a console.log() to find the element in question, it gave me an element not on the DOM. Just to be sure I try to change the *ui-sref*'s text to the colour red but no dice... *Problem found* *The* *ui-sref* *element is not the one being created inside the* *button* *!* Looking back at the part where the *ui-sref* element is created, it seems like the inside of the *button* is destroyed, a new element with *ui-sref* is placed inside and then compiled. It looks fine. Code below: if (isLocked === "false" || isLocked === false) { elem.css('background-color','green'); elem.empty(); elem.append('<div ui-sref></div>'); $compile(elem.children()[0],scope); } It's taken me 4 days so far trying to solve this problem and I've reduced it down as simple as I can get it now. Changing the link function to a compile function seems to solve the 'element not on the dom' issue but the whole ui-sref directive in this example is just a placeholder for another directive in the ui-router framework (which uses link, not compile) so I don't think i can just edit that, I'm only just learning custom directives, editing bits of a whole framework willy-nilly is a recipe for shooting myself in the foot. The whole problem stems from the fact that the 'elem' parameter in the link function doesn't represent the right element. Clicking a button after check the tickbox on and off should bring up an alert. I can't seem to find where I went wrong here. The link to the simplified example again is here: http://plnkr.co/edit/q2UKGOJr7AgFF84CbYiW?p=preview -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
