Directive making page hang

[Adam Brooks]

Hi all,

I'm experiencing a gnarly issue with directives. It's very easy to reproduce but I'm finding it very hard to narrow down the issue to the smallest possible piece of code to reproduce it, as every time I try to shrink my code it seems to affect the scope of the issue. There seem to be too many inter-related factors for me to get to the bottom of this. For example, two of the things that have helped avoid the issue in some circumstances but not others were putting the template directly into the directive rather than a html file, and using ng-show on the directive. I'd really appreciate some help in tips in how to investigate as this issue is now blocking me.

This page works fine -- http://www.pitchforpeople.com/profiles/edit/adam-brooks

This page hangs --  http://www.pitchforpeople.com/profiles/edit2/adam-brooks. There are no errors in the console but if you inspect the html you'll see the google analytics library repeatedly being added to the page.

The difference between the two pages is the addition of a directive that works fine on other pages. It's not the directive I want to use - I'm simply using something I know works, even if in another context, just to try to get to the source of the problem. I've tried using a simple directive that didn't actually do anything at all and I was still getting the same issues.

I know I've probably done something really basic wrong but I'm stuffed if I can figure out what it is!

Cheers,
Adam.

[Owen M]

Tried to have a look, but ended up just crashing my browser. I've run into some issues before with Angular being a bit too aggressive with caching templates. I got around this by using a "myTemplate.html?r=" + Math.random() to force the template to load each time.

Other ideas are scope isolation and setting up watches such that you are triggering infinite loops.

[Adam Brooks]

Thanks Owen. Not sure what's going on here. I've even tried using empty directives that do nothing and still get the same problem!?

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/4q1_P9c3svM/unsubscribe?hl=en-US.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Owen Mead-Robins]

Not sure what version control software you are using, bit using something like `git bisect` could help identify which patch introduced the issue and shed some light on things.

[Adam Brooks]

I know exactly /what/ is causing the issue, just not /why/ or how to work around it :)

[Sander Elias]

Hi Adam,

I opened your page hangs link, and that was not an exaggeration! Well, at least Chrome chokes on it. I opened if in Opera, and the problem showed itself. I did not take a look at the source, but your page is looping itself. By doing that, it eats all the available memory, and finally it stalls.  

I guess somehow you created an situation that makes your page into an endless loop. 

Whats is exactly the code you added? And where did you put that?

Regards

Sander Elias

[Adam Brooks]

Hi Sander,

Thanks for looking!

At the top of edit2.html I added this code -- <div profile="profile"></div>. I use this multiple times across the site and it works everywhere else.

The relevant code for the directive is --

p4pApp.directive('profile', function () {

return {

restrict: 'A',

scope: {

profile: '='

},

templateUrl: 'templates/profiles/profile_directive.html'

};

}

);

<div ng-show="profile">

<a href="/profiles/view/{{ profile.profilename }}" ng-show="profile.imageURL"><img alt="{{ profile.name }}" ng-src="{{ profile.imageURL }}" class="img-circle"></a>

<a href="/profiles/view/{{ profile.profilename }}"><h4>{{ profile.name }}</h4></a>

<p><b>Brief:</b> {{ profile.brief }}</p>

</div>

[Sander Elias]

Hi,

I suspect you have an attributte in your template that translates to 'profile'

Frst thing to try, rename your directive to "profileDirective" Or something you fancy more!

Regards

Sander

[Adam Brooks]

Hi Sander,

Funnily enough, to try to cut to the heart of the matter I've created a new profile, directive and controller. (Go to edit4 instead of edit2 and you might see the difference). I'm still seeing the issue. Weirdest of all perhaps is that IE seems to work fine!!

Cheers,
Adam.

[Sander Elias]

which IE?

[Sander Elias]

Adam,

I took another look, and it seems the looping is happening at a higher level, everything, including your scripts and stuff gets reloaded. Somehow your entire page keeps being added again and again. The mess that's created prevents me from quickly looking for the cause!

you directive is triggering this.

Regards

Sander

On Friday, May 17, 2013 11:05:23 AM UTC+2, Adam Brooks wrote:

[Adam Brooks]

IE9

[Adam Brooks]

Thanks very much for looking. I'm beginning to wonder if it's a server config type of issue. I'm going to keep trying to narrow down the code though to the smallest possible reproduction.

[Sander Elias]

hmm, take another look at your routing...

[Adam Brooks]

Is that a general comment or have you spotted something? :)

[Sander Elias]

Not sure, but the name 'profile' is trowed around a lot, 

I spotted also an id="ng-app" on your HTML tag.. not too sure about that either. (why would you have an ID there anyway???)

regards

Sander

[Adam Brooks]

I'll keep hunting. Owen was right - the template caching is v aggressive. No wonder I was having such a hard time yesterday - there was no telling which versions of which files I had together at a given point in time!

The id="ng-app" is there because of older IEs -- see http://docs.angularjs.org/guide/ie

Cheers,
Adam.

[Adam Brooks]

Thanks for your help guys. I got it. I was missing the leading slash on my templateUrl in my directives. *sigh*

[Andrew Stuart]

This probably saved me a good day of debugging IE. Thanks for posting the fix!

[Adam Brooks]

Glad I could help! (and save someone the same pain I had...)

To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/4q1_P9c3svM/unsubscribe.

To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.

Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.