Как реализовать angular -tour в веб-приложении angular

Я пытаюсь добавить тур в веб-приложение с помощью плагина ng-tour: http://daftmonk.github.io/angular-tour/ Пример на домашней странице плагина выполняется на одной веб-странице, и мне сложно понять, как это реализовать в веб-приложении angular. Я добавил следующее к моему index.html:

мой код:

добавление идентификатора шага к представлению:

<div ui-view="portal" ng-show="$state.includes('portal')" id="e0"></div>

В нижней части моего файла index.html:

<tour step="currentStep">
    <virtual-step tourtip="test " tourtip-element="#e0" tourtip-next-label="next" tourtip-placement="right" tourtip-step="0" ></virtual-step>

    </tour>
    </body>
</html>

Ничего не происходит, когда приложение переходит к представлению портала... Следует ли вместо этого добавлять тэг ng-tour к отдельным шаблонам HTML-представлений? Я попытался это изначально, но также не смог заставить его работать.

Ответы

Ответ 1

Если вы не инициализируете currentStep в своем контроллере, по умолчанию будет установлено значение -1, что означает, что тур не будет отображаться при загрузке страницы. - Angular обзорная документация

Поэтому убедитесь, что вы инициализировали $scope.currentStep в своем контроллере.

Что касается нескольких представлений, раздел виртуальных шагов документации говорит, что вы можете определить все свои шаги в одном месте и просто указать элементы в разных с помощью tourtip-element="#element-from-another-view". Конечно, эти взгляды должны быть в DOM, когда вы доберетесь до этого совета.