App Part : javascript library loaded only after clearing the cache

Question

I've created a provider hosted-app for SharePoint and I've added a Web Part into the App to be able to view my app from the SharePoint host web.

In the app web of the project, I've included various javascript libraries :

• jQuery
• Angular and ngRoute
• Trackpad scrol emulator and Isotope.js.
• and Isotope.js

I deploy the app, and I place the web part into a SharePoint page. I can see my app working like a charm.

Now, if I refresh the page or I navigate and come back to see my web part, the library Isotope.js isn't loaded anymore (like it were kept in cache) but my app doesn't work anymore.

I found out that if I clear the cache of the browser, I can make it works normally.

I also found a good post about this here

• Avoiding bugs from cached JavaScript and CSS files in SharePoint

but my scripts are not hosted on the host web but into the App web.

My questions is : why the others js libraries still working and not Isotope ? Besides the knowledge of this library, it should be the same for each js file of my app... Moreover, I disabled the MDS (Minimal Download Strategy) so pages are not kept in cache.

Thank you for any tips, we never stop to learn things on SP.

EDIT : When I debug the init of isotope with the Web browser toolkit JS debugger, it will WORK!! but not in normal execution. Is this need a delay to load something ...mh ...

Answer 1

It's my bad knowledge on Angular which led me to this issue :

My ng-repeat instruction wasn't finished while the isotope initialisation was made. To manipulate or initialize objects on the dynamically generated DOM when using Angular, you should use a directive. Here is the relevant part of my working code, with some explanations :

when creating my angular app, i'm adding a directive :

var App = angular.module('App', ['ngRoute']).directive('initIsotope', function () { return function (scope, element, attrs) { if (scope.$last === true) { scope.$emit('messagesLoaded'); } } }); 

then, in my controller, i'm going to add an event listener like this :

$scope.$on('messagesLoaded', function (messagesLoadedEvent) { var $container = $("div#pro-tab"); //init isotope $container.isotope({ itemSelector: 'div.activity-message', layoutMode: 'vertical' }); }); 

while i've got the following structure into my HTML :

<div class="activity-messages-content tse-content" > <div id="{{message.id}}" class="activity-message" ng-class="setMessageClass(message.type)" ng-repeat="message in results" init-isotope="messagesLoaded"></div></div> 

Basically, if I'm doing this, when the last element of my ng-repeat directive will be generated, it will emit an event called messagesLoaded. Then, I'm gonna listen to this event, and init isotope after I received it.

It's as simple as this, but the worst part was the debug time :(