2017-01-23 5 views
0

このディレクティブを実行する最善の方法は何でしょうか?私は、命令の実行の前に待たされる必要がある状態の間に少しの遅延を持っています。そうしないと、スクロールが邪魔になります。私は(div要素をスクロールダウンし、背景をクリック)$timeoutを使用して簡単な例を書いたディレイド角ディレクティブ実行

app.directive('scrolltop', function() { 
    return { 
     restrict: 'A', 
     link: function(scope, element) { 
      element.on('click', function() { 
       console.log('scrolltop'); 
       $('html, body').animate({ 
        scrollTop: $(element).offset().top - 50 
       }, 2000); 
      }); 
     }, 
    } 
}); 

答えて

1

... $timeoutを使用しようとしましたが、それはエラーをスローして、間違ったことを利用しているように見えるしています。

HTML:

<div ng-app="TestDebounce"> 
    <div scrolltop class="scrolltop"> 
     <span>...</span> 
    </div> 
</div> 

角度指令:

(function() { 
    angular.module('TestDebounce', []).directive('scrolltop', scrolltop); 
    scrolltop.$inject = ['$timeout']; 

    function scrolltop($timeout) { 
     return { 
      restrict: 'AE', 
      link: linkFunction 
     } 

     function linkFunction(scope, element) { 
      element.on('click', function() { 
       $timeout(function() { 
        $('html, body').animate({ 
         scrollTop: $(element).offset().top - 50 
        }, 'fast'); 
       }, 2000); // 2 seconds timeout 
      }); 
     } 
    } 

}()); 

JSフィドルlink - それを試してみてください。

関連する問題