Угловой материал без стрельбы

Question

Угловой материал без стрельбы

0

В настоящее время я создаю угловое приложение с угловым материалом. И у меня проблема со списком событий.

Мое приложение состоит из левого сиденава, который фиксирован, и контента справа. Я пытаюсь проверить свиток на содержании справа, но без каких-либо успехов. Я думаю, что директивы компоновки вызывают эту ошибку.

Это html-пример моей проблемы:

<body ng-app="MyApp" layout="row" ng-cloak>

 <md-sidenav layout="column" md-is-locked-open='true'>
   SideNav
   </md-sidenav>

  <md-content flex layout="column" scroll>
    <ng-view>
      <div class="test">Content</div>
    </ng-view>
  </md-content>
</body>

Javascript:

var app = angular.module('MyApp', ['ngMaterial']);

app.directive("scroll", function ($window) {
    return function(scope, element, attrs) {

        angular.element($window).on("scroll", function() {
            if (this.pageYOffset >= 100) {
                 console.log('Scrolled below 100px');
             } else {
                 console.log('Scrolled above 100px');
             }
        });
    };
});

Если <div class="test"></div> имеет огромную высоту, <md-content></md-content> будет прокручиваться, и я мог бы нормально запускать событие прокрутки с помощью моей scroll директивы.

Поэтому я помещал высоту <div class="test"></div> в 1500px:

md-sidenav  {
  width: 110px;height:100%;
  padding:20px;
  background-color: #6bc7cc;
}

md-content {
  background-color : tan;
  height:100%;
  padding:20px;
}

.test {
  height: 1500px;
}

К сожалению, он не работает, и я не могу запустить событие прокрутки. Что я делаю неправильно, и как я могу это исправить?

PS: вот сценарий моей проблемы: https://jsfiddle.net/wahddee2/4/

pchmn 26 март 2016, в 16:49

Источник

Теги:

javascript

jquery

angularjs

angular-material

1 ответ

Ещё вопросы

Sergiu Paraschiv · Accepted Answer · 2016-03-26T13-34-00.000Z

Это ваш element который прокручивается, а не $window, так что вы должны присоединить слушателя событий.

element.on("scroll", function() {
    console.log(element[0].scrollTop);
});