Skip to content
This repository has been archived by the owner on Apr 12, 2024. It is now read-only.

IE8 IE9 never gets the updateRoute method called #2608

Closed
nolazybits opened this issue May 8, 2013 · 3 comments
Closed

IE8 IE9 never gets the updateRoute method called #2608

nolazybits opened this issue May 8, 2013 · 3 comments

Comments

@nolazybits
Copy link
Contributor

Developing an application and tried with the latest stable and unstable version.
The application loads fine on all browser minus IE 9 and IE8 (and maybe lower)

Trying to debug it it looks like the $locationChangeSuccess broadcast is never received by the object listening for it $rootScope.$on('$locationChangeSuccess', updateRoute);
and thus never calls the updateRoute method.
The function afterLocationChange is called though.
I haven't been able to debug thanks to the sucky IE10 debugger (doesn't break on breakpoints I set in angularJS), so used console.log outputs.

I am bootstraping manually and I have a specific way of routing, not using ng-views but ng-include / ng-switch and adding to the routes an action property which will then be evaluated by the main controller and injected into the scope which the views are using for the ng-switch.
I don't know if it's related to the way I am routing things, as it really appears that the updateRoute is never called, but I here is the code anyways, in case I am wrong.

The route definition

    function (LOGIN)
    {
        LOGIN.config
        (
            [
                '$routeProvider', '$locationProvider', '$dialogProvider',
                function ($routeProvider, $locationProvider, $dialogProvider)
                {
                    $locationProvider.html5Mode(true).hashPrefix = '!';

                    $routeProvider
                        .when("/", { action: "login" })
                        .when("/forgot_password/", { action: "forgot_password" });
                }
            ]
        );
    }

The application controller

    function (LOGIN)
    {
        LOGIN.controller(
            'controllerApplication',
            [
                '$scope', '$route',
                function ($scope, $route) {
                    var self = this;

                    // Update the rendering of the page.
                    this.render = function ()
                    {
                        // Pull the "action" value out of the currently selected route.
                        var renderAction = $route.current.action;

                        // Also, let's update the render path so that we can start conditionally rendering parts of the page.
                        var renderPath = renderAction.split(".");

                        // Reset the boolean used to set the css class for the navigation.
                        var inLogin     = (renderPath[0] === "login");
                        var inPassword  = (renderPath[0] === "forgot_password");

                        // Store the values in the model.
                        $scope.renderAction = renderAction;
                        $scope.renderPath   = renderPath;
                        $scope.inLogin      = inLogin;
                        $scope.inPassword   = inPassword;
                        $scope.loaded       = false;
                    };

                    // Listen for changes to the Route.
                    // When the route changes, let's set the renderAction model value
                    // so that it can render in the Strong element.
                    $scope.$on
                    (
                        "$routeChangeSuccess",
                        function ($currentRoute, $previousRoute)
                        {
                            // Update the rendering.
                            self.render();
                        }
                    );
                }
            ]
        );
    }

And in my partial

<div id="main-container" ng-switch on="renderPath[0]">
    <div ng-switch-when="login" ng-include=" 'js/app/login/partials/login.html' "></div>
    <div ng-switch-when="forgot_password" ng-include=" 'js/app/login/partials/forgot-password.html' "></div>
</div>

I am yet to see an app working in IE8.
If you have any links I will be keen to check it out.
Cheers.

@nolazybits
Copy link
Contributor Author

@nolazybits
Copy link
Contributor Author

Ok I have been able to debug a little, and it looks like the listener is added ($on) AFTER the $locationChangeSuccess is triggered so the updateRoute is never called.
Any idea?

@nolazybits
Copy link
Contributor Author

I feel so ashamed... :)
After spending an hour debugging and finding out that angular was not finding the ng-controller directive for IE I realized that I forgot to include the same controller in the IE specific html directive...

All apologize

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant