This is an example of 'fighting the framework'. With angular, you don't need to do it that way. Instead of doing elem append or whatever, you can make this your template:
<div ng-if="locked">locked element</ng-if> <div ng-if="!locked">unlocked element</ng-if> Angular handles adding and subtracting elements on the DOM for you. Further, if you put ng-prefixed events, you don't have to keep re-registering events, so in your element, you can put ng-mouseover in both teh locked and unlocked states and again not worry about building and rebuilding the DOM. That way, you don't need a $scope.$watch routine either- two way binding takes care of everything for you. In general, unless you're doing something very funky in a corner case, you should not find yourself needing to use a compile function or use elem.append type calls. Declare the states in the template and let angular fiddle with the DOM. e On Thu, Oct 9, 2014 at 11:25 PM, Jayden Pearse <[email protected]> wrote: > > <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. > -- 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.
