Ionic slide box doesn't show up when ng-show is true

ionic-v1
1

I have a slide box that i want it to appear when i click on a button, so i attach ng-show to ion-slide-box for this purpose as following:

      <ion-slide>
        <div class="list card item-card">

          <div class="item">
            <h2>Item_Name</h2>
            <p class="size"><i class="icon ion-tshirt"></i> 36-45</p>
          </div>

          <div class="item item-body text-center">
            <img class="item-image" ng-src="img/3.png">
          </div>

          <div class="item">

            <span class="price">25<i class="icon ion-social-usd"></i></span>
          </div>

        </div>
      </ion-slide>

      <ion-slide>
        <div class="list card item-card">

          <div class="item">
            <h2>Item_Name</h2>
            <p class="size"><i class="icon ion-tshirt"></i> 36-40</p>
          </div>

          <div class="item item-body text-center">
            <img class="item-image" ng-src="img/3.png">
          </div>
              <div class="item ">
                               <span class="price">30<i class="icon ion-social-usd"></i></span>
          </div>
            </div>
      </ion-slide>

    </ion-slide-box>

The button code is as follow:

<button class="button" on-touch="showslidebox()">click</button>
the showslidebox() function is as follow:

$scope.show = false; //default: false
  $scope.showslidebox= function() {
    $scope.show = true;
}

When i click the button, the slide box html element appear in Elements section in google inspect, but it doesn’t appear on the screen, which is wired, i tried almost everything but still doesn’t work. (no error log in console too). any idea what might be the problem?

2

If you use a scope function, you should use a ng-directive, like ng-click

<button class="button" ng-click="showslidebox()">click</button>

3

Thanks for your reply.
I test this before and doesn’t solve the problem too.

4

can you try

<button class="button" ng-click="show=!show">click</button>

5

It doesn’t work too :frowning:

6

Your HTML is linked to your Controller ?

7

Well, i finally solve the problem by editing the code as below:

  $scope.show = false;
  $scope.click = function () {
    console.log('click');
    $scope.show = !($scope.show);
    $ionicSlideBoxDelegate.update();
  }

Hope it help someone else.

1 Like
8

Thanks for the update !
Good luck on devs !