Спрятать div на свитке с AngularJS

Я новичок в AngularJS. Я хочу скрыть div «A» в AngularJS, когда пользователь прокручивает на div «B». В настоящее время я могу скрыть div «A», когда пользователь нажимает на div «B», используя ng-click, но я не мог найти способ сделать это с помощью прокрутки с помощью AngularJS. Я знаю, я могу использовать JQuery, чтобы скрыть div, но есть ли способ сделать это с помощью AngularJS?Спрятать div на свитке с AngularJS

Update:

Я создал директиву прокрутки и прикрепил его с $ окна. Теперь div скрывается, если я просматриваю полное окно, но я хочу скрыть его, когда прокручивается конкретный div. Моя текущая реализация выглядит ниже:



    app.directive("scroll", function ($window) { 
     return function(scope, element, attrs) { 
      angular.element($window).bind("scroll", function() { 
       if (this.pageYOffset >= 10) { 
        scope.hideVs = true; 
       } else { 
        scope.hideVs = false; 
       } 
       scope.$apply(); 
      }); 
     }; 
    });

источник

2013-05-02 Ali Hasan Imam

прикрепить событие прокрутки окна и сделать класс шоу скрыть и используя нг-класс с выражениями типа нг-класса = { true: «active», false: inactive} [scrollpos = 'diva'] –

Вы знаете о http://docs.angularjs.org/api/ng.directive:ngСкрыть и http://docs.angularjs.org/ api/ng.directive: ngShow – Arcayne

Да, я знаю о ng-hide и ng-show. Я могу показать/скрыть его для события click, но как это сделать для события прокрутки? @Arcayne –

Я не уверен, почему вы хотели бы это сделать, но я создал jsfiddle с тем, что, как я думаю, вы хотите.

Я изменил вашу директиву слегка:

app.directive("scroll", function() { 
     return function(scope, element, attrs) { 
      angular.element(element).bind("scroll", function() { 
       scope[attrs.scroll] = true; 
       scope.$apply(); 
      }); 
     }; 
    });

, как вы можете видеть, в настоящее привязывается к событию прокрутки на DIV не окно. Я также изменил переменную, которую он устанавливает, так что она принимает значение, указанное в директиве scroll, как имя переменной.

http://jsfiddle.net/Tx7md/

Here is a version используя $ разобрана, чтобы установить значение, как было предложено @ganaraj

источник

2013-05-02 10:54:49

Спасибо. Это решение. Я просто понял это и увидел ваш ответ. –

oh отлично, не могли бы вы пометить мой ответ как правильный, спасибо –

@DerekEkins Вы не должны делать область действия [attrs.scroll] = true. (Потому что он не будет работать с вложенными объектами типа model.name) Вместо этого «правильный» способ сделать это - использовать службу parse. – ganaraj

Я предполагаю, на минуту, что вы не хотите использовать JQuery.

Использование директив не будет полным решением, если вы не уверены, что можете получить ссылку на div A из div B, используя только функции jqLite.

Что вы можете сделать, это создать 2 директивы: «do-hide-on-scroll» для div B и «get-hidden-on-scroll» для div A. Используя их, вы поймаете событие «прокрутки» на div B и использовать его для генерации события Angular с использованием $rootScope.emit для отправки события «div B в прокрутку» в родительскую область верхнего уровня. Объем родительского объекта, когда он получает это, будет $rootScope.broadcast одинаковым для всех его дочерних областей, одним из которых является div A. Директива Div A «get-hidden-on-scroll» имеет обработчик события, который прослушивает это событие, затем скрывает div и устанавливает $ timeout на полсекунды, чтобы снова показать div. Если он принимает событие снова, он сбрасывает таймаут.

Это довольно запутанный, я согласен, по сравнению с использованием только jQuery. Но в конце дня вы, вероятно, получаете лучшую производительность. В общем, одна из более крепких орехов, чтобы расколоться только с Угловым. Хороший вопрос!

источник

2013-05-02 10:51:46

Спрятать div на свитке с AngularJS

ответ

Смежные вопросы