opitzconsulting / jquery-mobile-angular-adapter

jquery mobile angular adapter
MIT License
517 stars 114 forks source link

Manual initialization of AngularJS not working #48

Closed jupiterplanet closed 12 years ago

jupiterplanet commented 12 years ago

I've seen in your readme that the ng-app directive is required and that the usage of manual bootstrap of angular does not work well with jquery-mobile, as jquery-mobile relies on the jQuery ready event to be fired at the right time.

However, it has worked so far with the former rc3-SNAPSHOT and rc2. No it seems that the current rc3-SNAPSHOT with manual initialization of AngularJS (http://docs.angularjs.org/guide/bootstrap) is no longer working. I have provided a jsFiddle which shows the problem: http://jsfiddle.net/jupiter/rJvPG/.

In Firefox the following error message is shown:

[Exception... "Node cannot be inserted at the specified point in the hierarchy" code: "3" nsresult: "0x80530003 (HierarchyRequestError)" location: "https://github.com/tigbro/jquery-mobile-angular-adapter/raw/master/compiled/jquery-mobile-angular-adapter-1.0.7-rc3-SNAPSHOT.js Line: 275"]

In Chrome a similar error message is displayed:

Error: HIERARCHY_REQUEST_ERR: DOM Exception 3 Error: A Node was inserted somewhere it doesn't belong. at connectToDocument (https://raw.github.com/tigbro/jquery-mobile-angular-adapter/master/compiled/jquery-mobile-angular-adapter-1.0.7-rc3-SNAPSHOT.js:275:38)

I use manual initialization because I use a script loader to conditionally load AngularJS modules and other code before I bootstrap the application.

If you do not plan to support manual initialization what could be an alternative to defer the AngularJS bootstrapping so that conditional loading can take place? I specifically use this in order to load the correct language files.

My current code looks something like this:

angular.element(document).ready(function() {
    var locale = localStorage.getItem('locale');    
    var url = 'i18n/angular-locale_'+locale+'.js';

    yepnope({
        load: url,
        callback: function(url, result, key) {
            angular.bootstrap(document,['myapp']);
        }
    });
});
tbosch commented 12 years ago

Hi, yes, that is true. But if you use angular.bootstrap(document.documentElement) instead of angular.bootstrap(document) it works. By the way, yesterday, I released the 1.1.0 version of the adapter, with some new features like AMD loader support, including an example of how to use it with requirejs by means of jQuery.holdReady, instead of manual bootstrapping...

Thanks for reporting! Tobias

jupiterplanet commented 12 years ago

Now it works like a charm. Thank you very much! I will look into the AMD loader support soon.