introjsモーダルウィンドウを開いて強調表示するmd-dialog

Question

私はintrojsを使用しています。モーダルウィンドウを開いてツアーの一環として強調表示する方法があるのだろうかと思っています。それはJSONオブジェクトでどのように見えますか？

現在、私はonclickのツアーを開くボタンがあります。

<md-button class="md-accent md-raised" ng-click="startIntro();"><i class="fa fa-play-circle" aria-hidden="true"></i>&nbsp;Take a Tour</md-button> 

マイツアーのステップは、クライアントコントローラにJSONオブジェクトに定義されています。私のモーダルウィンドウについては

$scope.startIntro = function(){ 
     var intro = introJs(); 
      intro.setOptions({ 
      steps: [ 
       { 
       intro: "Welcome to your Portal! Here's how to navigate through this site." 
       }, 
       { 
       element: document.querySelectorAll('#small-btn')[1], 
       intro: "Take a minute and fill out your Questionnaire. It will prepare you for your first day." 
       }, 
       { 
       element: '#twitter', 
       intro: "Follow us on social media!", 
       position: 'top' 
       } 
      ] 
      }); 
      intro.start(); 
     };  

私はmdのダイアログボックスを表示するmdボタンを使用しています：

<md-button id="small-btn" class=" btn1" ng-click="showAdvanced($event)" >  
     <md-tooltip md-direction="right">Questionnaire</md-tooltip> 
     <md-icon ng-if="!data.sysID" ng-style="{'background-color':'#F44336'}" class="circle-border md-60">assignment</md-icon> 
     <md-icon ng-if="data.sysID" ng-style="{'background-color':'#4CAF50'}" class="circle-border md-60">assignment_turned_in</md-icon> 
     </md-button> 

何か提案がありますか？

Answer 1

intro.js（https://introjs.com/docs/intro/api/に記載されています）のonbeforechangeイベントを使用して、そのステップに入るとモーダルを開き、ステップを終了するときにモーダルを閉じることができます。

intro.onbeforechange(function(targetElement) { 
    if (angular.element(targetElement).attr("id") === "step3") { 
    $scope.openModal(); 
    } 
    else { 
    $scope.closeDialog(); 
    } 
}); 

あなたはセットアップintrojsは、あなたのステップは、実際にあなたのテンプレートに存在するsetOptionsコールを使用して、オブジェクトときということに注意する必要があります。これを実現するには、md-dialogデモ（https://material.angularjs.org/latest/demo/dialog）で説明されている「事前レンダリングされたダイアログ」設定を使用できます。これは基本的に、モーダルが実際に表示されているかどうかにかかわらず、ダイアログにDOMが存在することを意味します。あなたはそうのように、このオープン：

#modaldialog

$mdDialog.show({ 
    parent: angular.element(document.body);, 
    targetEvent: $event, 
    contentElement: "#modaldialog" 
}); 

があなたの<md-dialog>をカプセル化するdiv要素です。

これはどのように機能するかを示す例です：https://plnkr.co/edit/r3Sd2Ti8pKn33A9DJ7R0