Why does not angular-tour work in sight?

Question

Why does not angular-tour work in sight?

Navigation

#1 by (2 votes)

1

I am using the angular-tour library that will guide me in case of doubts about certain functionalities of the screen.

But I can not make it work for me.

In the index.html file, I have imported:

<link rel="bower_components/angular-tour/dist/angular-tour.css"/> //en la parte del encabezado del index.
<script src="../bower_components/angular-tour/dist/angular-tour-tpls.min.js"></script> //hasta la parte final, luego de haberse cargado jquery y angularjs

In my file app.js I import the respective module.

angular.module("app", [
        "authService",
        /* Angular modules */
        "ngRoute",
        "ngAnimate",
        "ngSanitize",
        "ngAria",
        "ngMaterial",

        /* 3rd party modules */
        "oc.lazyLoad",
        "ui.bootstrap",
        "angular-loading-bar",
        "FBAngular",

        /* custom modules */
        "app.ctrls",
        "app.directives",
        "app.ui.ctrls",
        "app.ui.directives",
        "app.form.ctrls",
        "app.table.ctrls",
        "app.email.ctrls",
        "app.todo",
        "toastr",
        "angular-tour", //aca el modulo de angular tour
        "satellizer"
    ])

On the controller like this:

angular.module("Usuarios", [])
    .controller("UsuariosCtrl", ["$scope", "$modal", "$http", "$filter", "$modalStack", "$route", "$timeout", "toastr", function($scope, $modal, $http, $filter, $modalStack, $route, $timeout, toastr) {
//-------- Tour AngularJS --------------
        $scope.currentStep= 0; 
        //--------------------------------------        
    }])
}())

And in my view I have it this way:

<div class="page page-forms-imagecrop">
    <ol class="breadcrumb breadcrumb-small">
        <li>Home</li>
        <li class="active"><a href="#/usuarios">Usuarios</a></li>
        <div class="toast toast-{{positionModel}}">
            <alert ng-repeat="toast in toasts" type="{{toast.type}}" close="closeAlert($index)" class="toast-{{toast.anim}}">
                <div ng-bind-html="toast.msg"></div>
            </alert>
        </div>          
    </ol>
    <div class="page-wrap">
        <div class="row">
           <tour step="currentStep">
              <span tourtip="tip 1"> Highlighted </span>
              <span tourtip="tip 2"> Elements </span>
              <input tourtip="You can use it as an attribute on your element" />
              <span tourtip="Full options"
              tourtip-step="2"
              tourtip-next-label="Next"
              tourtip-placement="right"
              tourtip-container-element="body"
              tourtip-margin="0"
              tourtip-offset-vertical="0"
              tourtip-offset-horizontal="0"
              on-show="someFunc"
              on-proceed="someFunc">Full options</span>
          </tour>
        </div>
    </div>
</div>

In the console it does not show any error and in the view only the HTML is seen but without the functionality of the tour. The driver does work for me since I use other features such as toast and other functions that I did not add to the driver.

Thank you very much in advance.

angularjs

asked by JG_GJ 29.10.2018 в 00:39

source

1 answer

Load a select depending on another with php Store data temporarily on android

score 2 · Accepted Answer

Apparently working with jQuery 3 is not working correctly but the problem was already identified in the following issue : Not working with jQuery 3 from the repository of the project.

I quote the user's comment hprofit ( translated into Spanish ):

@tvsbrent @booleanbetrayal @DaftMonk

The problem comes from jQuery 3.1.1's .fadeIn that is not attaching display: block; to the container element div.tool-tip . Setting tourConfig.animation = false; will avoid this problem, but you lose the fade effect.

SOLUTION

You need to inject the service tourConfig into your controller and add the following line tourConfig.animation = false; .

For your case it would be as follows:

angular.module("Usuarios", [])
    .controller("UsuariosCtrl", ["$scope", "$modal", "$http", "$filter", "$modalStack", "$route", "$timeout", "toastr", "tourConfig", function($scope, $modal, $http, $filter, $modalStack, $route, $timeout, toastr, tourConfig) {
//-------- Tour AngularJS --------------
        tourConfig.animation = false;
        $scope.currentStep= 0; 
        //--------------------------------------        
    }])
}())

In Plunker you can find a project I did to test it in case you have any questions.

On the other hand, this component does not cause any problems if you are working with jQuery Core 2.2.4 and jQuery Core 1.12.4 .