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.
<link rel="bower_components/
y el js lo llamas con<script src="../bower_components/
, es decir, agregas...
. ¿Verificaste que puedas acceder a los estilos?