角度ウェブアプリケーションで角度ツアーを実装する方法

Question

ng-tourプラグインを使用してウェブアプリケーションにツアーを追加しようとしています：http://daftmonk.github.io/angular-tour/ プラグインのホームページの例は、角度のあるウェブアプリでこれを実装する方法を理解することは難しいです。私は自分のindex.htmlに以下を追加：

私のコード：ビューへのツアー段階のIDを追加する

：

：私のindex.htmlファイルの一番下に

<div ui-view="portal" ng-show="$state.includes('portal')" id="e0"></div> 

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

アプリがポータルビューにルーティングされても何も起こりません...代わりに個々のHTMLテンプレートにng-tourタグを追加する必要がありますか？私はそれを最初に試みたが、それを動作させることもできなかった。

Answer 1

コントローラでcurrentStepを初期化しないと、デフォルトで-1に設定されます。つまり、ツアーはページの読み込みに表示されません。 -Angular tour documentation

だから、あなたはあなたのコントローラで$scope.currentStepを初期化してください。

複数のビューについては、を使用して、1つのスポットですべてのステップを定義し、さまざまなビューの要素をターゲットにすることができます。the virtual steps section of the documentationもちろん、そのヒントに到達すると、それらのビューはDOM上になければなりません。