1

Estoy utilizando la librería angular-tour que me servira guiar al usuario en caso tenga dudas de ciertas funcionalidades de la pantalla.

Pero no logro hacer que me funcione.

En el archivo index.html, tengo importado:

<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

En mi archivo app.js importo el respectivo módulo.

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"
    ])

En el controlador de esta forma:

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; 
        //--------------------------------------        
    }])
}())

Y en mi vista lo tengo de esta forma:

<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>

En consola no me muestra ningún error y en la vista únicamente se ve el HTML pero sin la funcionalidad del tour. El controlador si me funciona ya que utilizo otras funcionalidades como el toast y demás funciones que no agregué completo en el controlador.

De antemano muy agradecido.

3
  • ¿Qué versión de jQuery utilizas en tu proyecto? el 29 oct. 2018 a las 1:03
  • Veo que llamas los estilos del componente con <link rel="bower_components/ y el js lo llamas con <script src="../bower_components/, es decir, agregas .... ¿Verificaste que puedas acceder a los estilos? el 29 oct. 2018 a las 5:23
  • Muchas gracias @AngelOropeza me ha funcionado tu respuesta, por favor podrias ayudarme con esta otra, es referente a la misma libreria. es.stackoverflow.com/questions/208817/… gracias
    – JG_GJ
    el 29 oct. 2018 a las 6:42

1 respuesta 1

2

Al parecer al trabajar con jQuery 3 no esta funcionando correctamente pero el problema ya fue identificado en el siguiente issue: Not working with jQuery 3 del repositorio del proyecto.

Cito el comentario del usuario hprofit (traducido al español):

@tvsbrent @booleanbetrayal @DaftMonk

El problema proviene de jQuery 3.1.1's .fadeIn que no esta adjuntando display: block; a el elemento contenedor div.tool-tip. Configurando tourConfig.animation = false; evitarás este problema, pero pierdes el efecto de desvanecimiento.

SOLUCIÓN

Necesitas inyectar el servicio tourConfig en tu controlador y añadir la siguiente línea tourConfig.animation = false;.

Para tu caso quedaría de la siguiente forma:

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; 
        //--------------------------------------        
    }])
}())

En Plunker puedes encontrar un proyecto que hice para probarlo en caso de que tengas alguna duda.

Por otra parte este componente no causa problema si se esta trabajando con jQuery Core 2.2.4 y jQuery Core 1.12.4.

1
  • estoy utilizando la versino 2.1.3
    – JG_GJ
    el 29 oct. 2018 a las 4:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.