Support AngularJS - alternative href implementation about nativepagetransitions

[tjvantoll]

I'm not sure if this is related, but I've been trying to get this plugin to work in an Ionic app and having problems. As soon as I pass window.plugins.nativepagetransitions.flip/slide() an href nothing works.

You can see the issue by cloning this repo, and adding the following code after this line in the ready block:

setTimeout(function() {
    // This works
    // window.location.href = "#/tab/settings";

    // This doesn't
    window.plugins.nativepagetransitions.flip({
        href: "#/tab/settings"
    });
}, 2000);

Any ideas @EddyVerbruggen?

[EddyVerbruggen]

@tjvantoll What does seem to work is href: "index.html#/tab/settings" instead of href: "#/tab/settings"

The plugin should be able to handle your href as well though, so I will fix that.

[tjvantoll]

@EddyVerbruggen Yep, index.html#/tab/settings works as expected. Thanks for the help!

[leandroz]

Hey Guys!
I am using the plugin with UI-Router, i created a service for navigation that takes the name of the state and the params, create the url and make the transition using the href property. The problem that i have is that the event stateChangeSuccess is triggered before the transition is complete. Could this cause problems?

[lylepratt]

I'm experiencing something similar. If I pass index.html#/myroute, the main view immediately transitions, then about 10 seconds later I get an Application Error:

The connection to the server was unsuccessful. (file://android_asset/www/index.html#/myroute)

Anyone get this to work with angular yet?

[leandroz]

I am using it and is working ok, not perfect but ok. I am using a service for replacing the $state.go of UI-Router, here is the code.

$pageTransitions.transitionTo = function(state, params, transition, direction) {
            var deferred = $q.defer();
            var urlFormated = $state.href(state, params);
            console.log('URL FORMATED');
            console.log(urlFormated);
            if (transition == 'slide') {
                slideOptions.href = 'index.html' + urlFormated;
                slideOptions.direction = direction;
                window.plugins.nativepagetransitions.slide(
                    slideOptions,
                    function(msg) {
                        console.log('$pageTransitions.transitionTo --> Success');
                        deferred.resolve();
                    },
                    function(msg) {
                        console.log('$pageTransitions.transitionTo --> Error');
                        deferred.reject();
                        //$state.go(state, params);
                    }
                );
            } else if (transition == 'flip') {
                flipOptions.href = 'index.html' + urlFormated;
                flipOptions.direction = direction;
                window.plugins.nativepagetransitions.flip(
                    flipOptions,
                    function(msg) {
                        console.log('$pageTransitions.transitionTo --> Success');
                        deferred.resolve();
                    },
                    function(msg) {
                        console.log('$pageTransitions.transitionTo --> Error');
                        deferred.reject();
                        //$state.go(state, params);
                    }
                );
            }
            return deferred.promise;
        };

Then if the transition was successful, i am broadcasting an event and using it in the controller if i need to init something after the transition is completed. $rootScope.$broadcast('transition:success');