【Angular】スクロールイベントを監視するDirective
AngularJSでスクロールイベントに伴う処理を実装したかったのですが、スクロールイベントの監視をビジネスロジックに記述したくなかったので、画面のスクロールイベントを監視させるAngularのDirectiveを作成しました。
Directive
angular.module('App') .directive('ngScroll',[ '$window', function($window){ return { scope:{ // ng-scrollの右辺値が関数であることを指定 // compileプロパティの関数が返す関数の引数$scopeに格納 ngScroll : '&' }, compile: function(element, attrs) { return function($scope, element, attrs) { angular.element($window).bind('scroll', function(){ // ng-scrollの右辺値に指定した関数を呼び出し $scope.ngScroll($window); }); } } } }]);
Controller
angular.module('App', []) .controller('MainController', [ '$scope', function($scope){ $scope.onScroll = function() { console.log('scroll'); } }]);
HTML
<body ng-controller='MainController'> <div ng-scroll="onScroll()"></div> </body>
directiveを定義したタグを含むページのスクロールを監視できます。
これで、ビジネスロジック側はスクロール時の挙動定義に集中できます。