noScroll directive is affecting the scroll in all the app

ionic-v1
1

Hey guys.

I’m using the swipe-cards.js which needs a directive call noScroll for the cards and it works great, the only problem is that it’s affecting the scroll in others templates of the app.
I’ve the noScroll directive in app.js

.directive('noScroll', function ($document) {
  return {
    restrict: 'A',
    link: function($scope, $element, $attr) {
      $document.on('touchmove', function(e) {
        e.preventDefault();
      });
    }
  }
});

And the template for the swipe cards looks like this.
In ion-view is the noScroll directive

<ion-view no-scroll>
  <ion-pane style="background: #333">
   	  <div class="bar bar-header bar-transparent">
		<h1 class="title">Promos</h1>
	  	<a class="button button-positive icon ion-person" href="#/tab/dash"></a>
	  </div>

	  <swipe-cards>
	    <swipe-card on-swipe="cardSwiped()" on-destroy="cardDestroyed($index)" id="start-card">
	      Swipe hacia abajo para una nueva tarjeta
	    </swipe-card>
	    <swipe-card ng-repeat="card in cards" on-destroy="cardDestroyed($index)" on-swipe="cardSwiped($index)">
	      <div>
	        <div class="title">
	          {{card.p_name}}
	        </div>
	        <div class="image">
	          <img src="http://192.168.1.6:3001/{{card.p_image}}">
	        </div>
	        <div class="button-bar">
	          <a class="button button-clear icon ion-plus button-positive" href="#/card/{{card.p_id}}"> Mas info</a>
	        </div>
	      </div>
	    </swipe-card>
	  </swipe-cards>
  </ion-pane>
</ion-view>

And I’ve this other template in which the content needs to be scrollable.

I even add scroll=“true” in ion-content, but it doesn’t work

<ion-view style="background: #1b5a83">

    <ion-content ng-repeat="detail in details">

      <ion-header-bar class="bar-calm">
        <h1 class="title">{{detail.p_name}}</h1>
        <a class="button button-icon ion-chevron-left" href="#/cards"></a>
        <button class="button button-icon ion-heart" ng-click="onHeart({{detail.p_id}})"></button>
      </ion-header-bar>

      <br><br>

      <div class="list card">
        <div class="item item-body">
          So many content here!!
        </div>
      </div>

    </ion-content>
</ion-view>

So, how can I let the noScroll directive affect only in where it’s needed?

2

Hey there, why not use scroll="false" instead of the directive? This way it won’t mess with the rest of the app

3

It doesn’t work, I try in <ion-view> and in <swipe-cards> and doesn’t work :cry:

4

Can you put together a codepen example of this?

5

I put scroll="false" inside a inside an <ion-content> directive and it worked like a charm for me.

6

TRY THIS inside a inside an directive and it worked like a charm for me.