I've encountered a scoping issue with the use of this inside an angular-ui bootstrap modal. The code below functions perfectly outside of a modal, but encounters problems when run within one:
var GlobalVariable = GlobalVariable || {};
(function(){
doSomethingWith(GlobalVariable.field);
})();When executed outside the $modal, GlobalVariable.field is accessible as expected. However, once this code is run inside a $modal, GlobalVariable.field becomes undefined. One workaround would be to access window.GlobalVariable.field directly within the $modal dialog. But the issue lies in the fact that the doSomethingWith method used here is part of a third party library that relies on global variables. Adding "window." to all global variables for every third party library isn't a feasible solution.
I understand that when calling $modal.open and passing HTML, it undergoes manipulation by Angular's $compile function, which likely involves some form of evaluation. My assumption is that during this processing, a new instance of 'this' object is created, leading to the loss of inheritance from globally scoped window variables.
Is there a way to make angular's $compile function ensure the 'inheritance' of global variables from window down to my modal?