如何在angular web应用中实现angular-tour
how to implement angular-tour on a angular web app
我试图添加一个旅游到一个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上,当你得到这个技巧。
相关文章:
- Angular Tour指令问题
- 如何使用已经存在的 REST API 后端在 Angular 应用程序中实现登录系统
- Angular实现多搜索过滤器
- Angular 2:实现HTTP POST请求
- 在Angular Service/Controller中实现安全$apply的最佳方法
- 如何使用组件和自定义验证实现Angular 1 Form
- Angular Factory:实现getAll函数以使用REST-Api
- angular如何实现bindonce指令
- Angular框架是否为立即返回的promise实现常量
- $when.apply在Angular AJAX promise实现中的应用
- 实现PDF预览或从BLOB格式在网页中隐藏PDF的部分-Angular
- 无法访问Electron ipcRenderer内部实现的Angular$scope变量
- 有没有一种更简洁的方法可以使用 Angular 指令实现页面位置感知
- 如何实现 Angular 指令来替换元素,但仅限于某些情况
- JQuery vs Angular 实现数百个值滑块
- 如何在核心javascript中实现angular$watch函数
- 如何在wordpress上实现bootstrap tour
- 如何在已经存在的纯javaScript项目中实现angular js
- 实现angular ui-router,而不是ng-router
- 如何在angular web应用中实现angular-tour