javascript - 如何在 Angular 网络应用程序上实现 Angular 游览

Question

我正在尝试使用 ng-tour 插件将游览添加到网络应用程序:http://daftmonk.github.io/angular-tour/插件主页上的示例是在单个网页上完成的，这让我很难弄清楚如何在 Angular 网络应用程序上实现它。我在 index.html 中添加了以下内容:

我的代码:

将游览步骤 ID 添加到 View 中:

<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>

当应用程序路由到门户 View 时没有任何反应...我应该将 ng-tour 标记添加到各个 View HTML 模板吗？我最初尝试过，但还是没能成功。

Answer 1

If you don't initialize currentStep in your controller it will be by default set to -1, which mean the tour won't appear on page load. -Angular tour documentation

因此请确保在 Controller 中初始化 $scope.currentStep。

关于多个 View ，the virtual steps section of the documentation说您可以在一个地方定义所有步骤，并使用 tourtip-element="#element-from-another-view" 在不同的 View 中定位元素。当然，当您到达那个提示时，这些 View 必须在 DOM 上。