如何在角度Web应用程序上实现angular-tour

Question

我正在尝试使用ng-tour插件添加一个Web应用程序之旅:http://daftmonk.github.io/angular-tour/ 插件主页上的示例在单个网页上完成,使其变得困难让我弄清楚如何在角度Web应用程序上实现这一点.我在index.html中添加了以下内容:

我的代码:

将tour-step id添加到视图中:

<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模板吗？我最初尝试过,但也无法使它工作.

Answer 1

如果您未在控制器中初始化 currentStep，它将默认设置为 -1，这意味着游览不会出现在页面加载时。 - Angular 游览文档

因此，请确保$scope.currentStep在控制器中进行初始化。

关于多个视图，文档的虚拟步骤部分表示您可以在一个位置定义所有步骤，并使用tourtip-element="#element-from-another-view". 当然，当您了解这一技巧时，这些视图必须位于 DOM 上。