1

Having a bit of an issue, I have a page which gets routed into ng-view via a page transition. The problem is that I have a slideshow gallery which needs to be built before displaying the page.. cant seem to find a way of delaying the page transition.. I Ive read something about ngCloak and tried to put it on my home page template but doesnt seem to do anything...

Hope you guys can put me in the right direction..

homeController.js

angular.module("sportsStore")
.controller("homeCtrl", function ($scope) {
    $scope.pageClass = 'page-home';
    $scope.quantity = 4;

})

homeCtrl.slider = function ($timeout) {
  return {
            templateUrl: "AngularJS/views/sliderTemplate.html",
            compile: function compile(tElement, tAttrs, transclude) {
                return function (scope, element, attrs) {
                $timeout((function() {
                return element.flexslider({
                            animation: "slide",
                            controlNav: false,
                            directionNav: true,
                            nextText: "<i class='fa fa-angle-right'></i>",
                            prevText: "<i class='fa fa-angle-left'></i>",

                        });
                }), 0);

        }
        }
    }
};

Routes

.config(function ($routeProvider) {
    $routeProvider.when("/complete", {
        templateUrl: "AngularJS/views/thankYou.html"
    });
    $routeProvider.when("/placeorder", {
        templateUrl: "AngularJS/views/placeOrder.html"
    });
    $routeProvider.when("/checkout", {
        templateUrl: "AngularJS/views/checkoutSummary.html"
    });
    $routeProvider.when("/products", {
        templateUrl: "AngularJS/views/productList.html",
        controller: "productListCtrl"

    });
    $routeProvider.otherwise({
        templateUrl: "AngularJS/views/homeView.html",
        controller: "homeCtrl"
        resolve: homeCtrl.slider
    });
})
user3355603
  • 1,091
  • 2
  • 12
  • 19
  • When you used ng-cloak did you have the supporting CSS in place for it? – Darren Wainwright Jul 15 '14 at 10:12
  • yes put the representative styles in css. issue is the page transition happens and whilst its in flow the slideshow is being built. doesnt look very nice.. need to build it then do the page transition. bit new angular js – user3355603 Jul 15 '14 at 10:19
  • In that case I would suggest you look at `resolve`ing your route. I would post this as an answer, though its available in a much better write-up here: http://stackoverflow.com/questions/11972026/delaying-angularjs-route-change-until-model-loaded-to-prevent-flicker – Darren Wainwright Jul 15 '14 at 10:32
  • Essentially, by using the `resolve` your route won't actually change until the promise has been resolved from the controller. So you'll be able to set it up so that your route won't fire until the slideshow has been built – Darren Wainwright Jul 15 '14 at 10:33
  • ok thats ill check out resolve now and get back to you all.. – user3355603 Jul 15 '14 at 10:39
  • cant seem to get the resolve working! ill update my code now – user3355603 Jul 15 '14 at 11:01
  • Still have not manged to fix my issue. is there any chance one of you guys could build me a example.. would be great help thanks – user3355603 Jul 20 '14 at 14:05

0 Answers0