Objective:
Integrate AngularJS into existing infrastructure s.t. team can exploit
angular features without
retrofitting our existing loading schema.
History:
Previous pagination system would grab an html fragement, possibly including
inline script tags, and place them into a hidden iframe. The iframe
executes the scripts, then emits a completion event. jQuery.load() is bound
the iframe, and upon iframe load completion would fire "displayPage()" to
...you guessed it... display the page. This function copied the html from
the iframe into a visible page-container on the visible page via an
elements .innerHTML property. JS would largely not run when using the
innerHTML property.
Strategy:
Let angular take over the pagination loading, place all html content in the
same place as previous, and let it compile any angular content if any
ng-controllers are found.
1) Modify displayPage() to no longer place the content into the visible
page, but rather, a global window property. Strip the iframe of <script>
tags, and place it into window (window.iframeScriptless).
2) Have displayPage() execute an $apply()/$digest() to force all $watches
to execute.
3) Meanwhile, create and use a compiledIframe directive, that $watch'es
window.iframeScriptless. Place the directive on the page-container. Thus,
when displayPage() is run, this new directive's $watch listener is
executed, and detects that there is new html to load.
4) compiledIframe's listener compiles the window.iframeScriptless, purges
the page-container, then appends the compiled content into it.
In this regard, the user clicks a link, the content is loaded into the
iframe, the content executes as necessary, displayPage() then cleans the
content of js, puts it on the window, where angular detects it, compiles
it, then inserts it.
Problem Statement:
This series of events results in an infinite digest cycle, *sometimes.*
Debugging has not rendered fruitful findings. I will attempt a plunkr
shortly! Any hints in the meanwhile are appreciated!
---
Pertinent Snippets:
// Handles updating the page when the pagination Iframe content is updated
.directive('compileIframe', [
'$compile',
'$window',
function ($compile, $window) {
return {
link: function (scope, elem, attrs) {
scope.$watch(
function checkIframeForChange(){
return $window.pageContentScriptless;
},
function iframeContentChanged() {
var uncompiledHTML = $window.pageContentScriptless,
el = angular.element(uncompiledHTML),
compiled = $compile(el);
compiled(scope);
//append our view to the element of the directive.
elem.html('').append(el);
console.log('iframe content changed - new content loaded - html
len:',
uncompiledHTML ? uncompiledHTML.length : '0 - undefined'); //
TODO delete
}
);
}
};
}])
function displayPage() {
var content = window.frames.pageIframe.document.body.innerHTML;
SCRIPT_REGEX = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;
if (!content) return; // nothing to display
while (SCRIPT_REGEX.test(content)) content =
content.replace(SCRIPT_REGEX, "");
window.pageContentScriptless = content; // $watched by angular
window.appcScope.safeApply(); // trigger angular refresh
}
--
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.
