angular-tour虚拟步骤深度实战用virtual-step打造跨页面跨控制器的复杂导览【免费下载链接】angular-tourAngularJS directive for giving an interactive tour of your website.项目地址: https://gitcode.com/gh_mirrors/an/angular-tourangular-tour 是一款 AngularJS 指令用于为网站提供交互式功能导览tour。如果你的应用是单页架构导览步骤分散在不同页面、不同控制器里内置的virtual-step 虚拟步骤就是关键利器——它让提示框与目标元素彻底解耦轻松实现跨页面、跨控制器的复杂导览。为什么需要 virtual-step 虚拟步骤常规的tourtip必须写在目标元素上提示框长在元素旁边。这在一个页面、一个控制器的简单场景里没问题但真实业务中常见这样的结构页面由多个ng-include/ 路由视图拼装而成按钮 A 在列表控制器里输入框 B 在弹窗控制器里你希望用一个统一的tour容器按剧本顺序依次讲解 A → B → Cvirtual-step就是为此设计的步骤定义可以集中写在页面底部用tourtip-element属性指定CSS 选择器指向任意位置的目标元素。步骤在哪里定义和指向哪里完全分离。核心属性速查表属性作用tourtip提示框文案tourtip-element目标元素的 CSS 选择器跨页面/跨控制器指向的关键tourtip-step显式指定步骤顺序不写则按出现顺序tourtip-placement提示框方位top / right / left / bottomtourtip-next-label下一步按钮文字on-show步骤显示时执行的回调on-proceed点击下一步时执行的回调tourtip-container-element提示框挂载的容器适配可滚动容器use-source-scope回调在哪个作用域执行跨控制器的关键开关三分钟上手安装与初始化 ⚡bower install angular-tour也可以在本地克隆仓库研究源码与示例git clone https://gitcode.com/gh_mirrors/an/angular-tour注意jQuery 必须先于 angular-tour 加载。在应用模块中注册即可angular.module(myApp, [angular-tour])实战跨控制器的两步导览脚本下面这个例子中魔法按钮和另一个按钮位于不同作用域而导览步骤集中定义在一个tour容器里div classcontainer a classmagic-button ng-clicksomeRandomAction()魔法按钮控制器 A/a a idother-button另一个按钮控制器 B/a /div !-- 页面底部与目标元素完全分离 -- tour stepcurrentStep virtual-step tourtip第一步这是控制全局的魔法按钮 tourtip-next-label继续 tourtip-placementbottom tourtip-element.magic-button on-showsomeRandomAction() tourtip-step0 / virtual-step tourtip第二步这里属于另一个控制器 tourtip-element#other-button on-proceedlocalAction() use-source-scopetrue tourtip-step1 / /tour标签名本身不重要virtual-step只是约定写法。更多完整写法可参考官方示例中的 13 步导览脚本demo/index.html以及文档中Virtual steps一节的原始示例README.md。跨页面跳步的核心技巧on-proceed 返回 Promise 这是很多教程不会告诉你的细节on-proceed回调可以返回 Promise导览会等它完成后再进入下一步。源码中proceed的实现是$q.resolve(onProceedResult).then(...)见 src/tour/tour.js。这意味着你可以在on-proceed里触发路由跳转如$state.go(detail)把路由切换完成 Promise 返回新页面渲染后下一步提示框才出现配合on-show展示 300ms 后执行天然等新视图渲染完毕跨页面导览就像顺藤摸瓜一样顺滑。作用域选择use-source-scope 怎么配虚拟步骤的回调在哪个作用域执行由use-source-scope决定源码逻辑见 src/tour/tour.jsfalse默认回调在目标元素所在的作用域求值——讲解按钮时直接调用按钮控制器里的方法true回调在步骤自身的作用域求值——适合步骤集中定义在页面底部、想复用统一逻辑的场景一句话记忆想贴着目标说话用 false想站在编剧角度说话用 true。细节调优与常见坑 ⚠️currentStep默认为 -1不初始化就不会自动开播导览想自动开始需赋值为0目标元素必须已存在选择器找不到元素会直接抛出 Target element could not be found 错误跨页面时务必确认上一步的路由切换已完成乱序步骤tourtip-step配合有序列表工厂src/tour/tour.js可以任意指定播放顺序甚至倒着走DOM可滚动容器把tourtip-container-element指向容器选择器提示框会相对容器定位而非 body窗口缩放内置防抖重定位debounce resize 监听移动鼠标拖拽窗口也不会错位关键文件导航 文件说明src/tour/tour.js核心指令与控制器实现src/tour/tour.tpl.html提示框默认模板demo/index.html13 步虚拟步骤完整演示README.md官方文档含 Virtual steps 章节CHANGELOG.md版本变更记录karma.conf.js单元测试配置掌握了virtual-steptourtip-element 可返回 Promise 的on-proceed你就可以把导览剧本写成任意复杂的跨页面流程——这正是 angular-tour 相比普通提示框组件的独特价值所在。【免费下载链接】angular-tourAngularJS directive for giving an interactive tour of your website.项目地址: https://gitcode.com/gh_mirrors/an/angular-tour创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考