AngularJS - xdLocalStorageProvider.init() is called after the module.run() and controller initialize about cross-domain-local-storage

[ofirdagan]

Hi @reggieboyYEAH , thanks for pointing out the problem. I did a new major release (version 2.0.0) and now the angular service xdLocalStorage uses promises instead of ugly callbacks :).

I also moved the init function to the regular run because I needed it to resolve the iframe load promise.

I updated the docs so u can take a look in the new implementation. I hope it will help u. LMK otherwise.

[reggiepangilinan]

Hello @ofirdagan, first of all thanks for updating the framework 👍

But im still having issues, the iframe loads very late in the process causing undefined variables.

here is my code

var module = angular.module('app', ['xdLocalStorage'])
.config(function (xdLocalStorageProvider) {

}).run([
    'xdLocalStorage', function(xdLocalStorage) {
        console.log("Hello from app run");
        xdLocalStorage.init(
        {   /* required */
            iframeUrl: 'http://localhost:58935/iframe.html'
        }).then(function() {
            //an option function to be called once the iframe was loaded and ready for action
            console.log('Got iframe ready');
        });

    }
]).controller('IndexController', [
        'xdLocalStorage', function(xdLocalStorage) {
            console.log("Hello from index controller");

            ////xdLocalStorage.setItem('iframe', 'iframe');

            xdLocalStorage.getItem('iframe').then(function(response) {
                console.log(response.value);
            });

        }
    ]
);

and the output will be

Hello from app run index.js:18
Hello from index controller
angular.js:12116 TypeError: Cannot read property 'contentWindow' of undefined
at buildMessage (ng-xdLocalStorage.min.js:78)
at window.xdLocalStorage.window.xdLocalStorage.getItem (ng-xdLocalStorage.min.js:137)
at ng-xdLocalStorage.min.js:193
at angular.js:14347
at m.$get.m.$eval (angular.js:15574)
at m.$get.m.$digest (angular.js:15385)
at m.$get.m.$apply (angular.js:15679)
at angular.js:1582
at Object.e as invoke
at d (angular.js:1580)(anonymous function) @ angular.js:12116$get @ angular.js:8976(anonymous function) @ angular.js:14355$get.m.$eval @ angular.js:15574$get.m.$digest @ angular.js:15385$get.m.$apply @ angular.js:15679(anonymous function) @ angular.js:1582e @ angular.js:4379d @ angular.js:1580uc @ angular.js:1600Td @ angular.js:1494(anonymous function) @ angular.js:27867a @ angular.js:2927c @ angular.js:3201
index.js:12
Got iframe ready

It seems like an angular issue. The angular.run() does not wait for a promise to be resolved.
angular/angular.js#4003

i think the workaround is to bootstrap angular manually.
Not sure if there is a way that we can integrate that in the framework.
Do you have any recommendations?

I will try some approach and will let you know.

Cheers!

[ofirdagan]

Hey @reggieboyYEAH , I didn't know about this issue but a nice solution can be using the resolve option when u create IndexController. I'm guessing that u use routing of some sort.

Check out this video which explains it.

https://www.youtube.com/watch?v=Kr1qZ8Ik9G8&feature=player_embedded

I hope it helps :)

[reggiepangilinan]

Hi @ofirdagan, I tried the routing resolve approach but unfortunately it didn't work for me. It does not resolve values from xdlocalstorage.

I ended up using the deferred bootstrap approach.
https://github.com/philippd/angular-deferred-bootstrap

And now it works.

Thanks for the help! Appreciated :)