Call tour.start() from controller about angular-bootstrap-tour HOT 5 CLOSED

Check to see if $scope.tour is available, if your controller is declared outside of the tour declaration then it will not be available. In the initTour function wrap everything with if ($scope.tour) { ... }.

If that isn't the issue, try using tour.restart(true) or maybe even tour.start(true) to force it to start.

from angular-bootstrap-tour.

Any update @vvillasoto?

from angular-bootstrap-tour.

@benmarch I am able to make it work but not by using $scope.tour. This will not be found. I inspected it and found that the tour object is attached to any one of the step elements / or just the container element wherein all the steps can be found within the html. I used angular.element to access it from the controller.

$scope.initTour = function() {
    // if you like to do any modification in the tour object
    angular.element( "#section1" ).scope().tour._options.template = 
            "<div class='popover tour-xdkTour' role='tooltip'>" + "\n"
          + "<div class='arrow'></div>" + "\n" + "<h3 class='popover-title'></h3>" + "\n"
          + "<div class='popover-content'></div>" + "\n" + "<div class='popover-navigation'>" + "\n" 
          + "<div class='btn-group'>" + "\n"
          + "<button class='btn btn-default' data-role='prev'>« Prev</button>" + "\n"
          + "<button class='btn btn-default' data-role='next'>Next »</button>" + "\n" + "</div>"
          + "\n" + "<button class='btn btn-default' data-role='end'>Next Widget</button>" + "\n"
          + "</div>" + "\n" + "</div>";
   // next you can init and start the tour
   angular.element( "#section1" ).scope().tour.init();
   angular.element( "#section1" ).scope().tour.start();
}

$scope.init = function() {
    MyService.getData().then(
        function(data) {
              $scope.data = data;
              $timeout($scope.initTour(), 2000);
        }
}

var interval = $interval($scope.init, 60000);

$scope.$on('$destroy', function() {
      $interval.cancel(interval);
});

hope this helps. Let me know if you figure out a better solution.

Thanks.

from angular-bootstrap-tour.

It looks to me like this code is in a controller that is outside of the scope of the tour controller. If you can move this controller code inside of "#section1" then you would be able to access it via $scope.tour. You can also improve this by moving the template text into a template script tag and using the template-url attribute on the tour element.

from angular-bootstrap-tour.

Thanks for the advice. Will try to improve on it. I think this is resolved :)

from angular-bootstrap-tour.