2016-09-27 9 views
0

角度素材のアプリケーションで、右側のsidenavでintro.jsチュートリアルを作成する際に問題が発生しています。私はこのプランナーの問題を再現することができました。intro.jsが角度のある素材で正しく機能していないsidenav

http://plnkr.co/edit/L0obADPTtiU028B806vF?p=preview

angular 
    .module('YourApp', ['ngMaterial', 'angular-intro']) 
    .config(function($mdThemingProvider){ 

     $mdThemingProvider.theme('default') 
     .primaryPalette('blue') 
     .dark(); 
    }) 
    .controller('ctrl', function ($scope, $mdSidenav) { 
    $scope.toggleRight = buildToggler('right'); 
    $scope.toggleLeft = buildToggler('left'); 

    $scope.IntroOptions = { 
     steps:[ 
     { 
      element: '.step1', 
      intro: 'Testing', 
      position: 'left' 
     }, 
     { 
      element: '.step2', 
      intro: 'Testing', 
      position: 'left' 
     }, 
     { 
      element: '.step3', 
      intro: 'Testing 2', 
      position: 'left' 
     }], 
     showStepNumbers: false, 
     exitOnOverlayClick: true, 
     exitOnEsc: true, 
     nextLabel: '<strong>NEXT!</strong>', 
     prevLabel: '<span style="color:green">Previous</span>', 
     skipLabel: 'Exit', 
     doneLabel: 'Thanks' 
    }; 
    $scope.ShouldAutoStart = false; 

    function buildToggler(navID) { 
     return function() { 
     $mdSidenav(navID).toggle() 
     } 
    } 
    }); 

これはintro.js /アンギュライントロのバグですか、私が何か間違ったことをやっています?私は起こっていることは、右側の選択された要素の位置がsidenavが正しく計算されていないことを信じています。このplunkerに見られるように、この問題が

http://plnkr.co/edit/PEUryioQPOckx5AzRGpK?p=preview

答えて

0

それはあなたがあなたの側のナビゲーションパネルに指示md-is-locked-openを追加する場合にのみ機能します...左手のsidenavのために現れていません。これが定義されていない場合、パネルはロックされず、位置は正しく計算されません。 この式がtrueと評価されると、sidenavは 'ロックを解除します':コンテンツのフローに表示されるのではなく、そのフローに入ります。これにより、md-is-open属性が上書きされます。

+0

私はsidenavをロックしたくないです。私はsidenavをオープンにロックしないで解決策を見つけることになりましたが、プロジェクトに戻って私のコードを掘り下げて私がしたことを覚えておく必要があります。 – btathalon

関連する問題