如何在angular web应用中实现angular-tour

how to implement angular-tour on a angular web app

本文关键字：实现 angular-tour 应用 web angular      更新时间：2023-09-26

我试图添加一个旅游到一个web应用程序使用ng-tour插件:http://daftmonk.github.io/angular-tour/插件主页上的例子是在一个网页上完成的，这使得我很难弄清楚如何在angular 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模板中吗?

如果你没有在你的控制器中初始化currentStep，它将默认设置为-1，这意味着巡演不会出现在页面加载。-Angular tour文档

确保你在控制器中初始化了$scope.currentStep

关于多个视图，文档的虚拟步骤部分说您可以在一个位置定义所有步骤，并且使用tourtip-element="#element-from-another-view"仅针对不同视图中的元素。当然，这些视图必须在DOM上，当你得到这个技巧。

相关文章：