ngAnimate Failing for ion-nav-buttons?


#1

Hi Guys,

Spent my entire day today trying our various approaches to fix this issue. But I havent yet found the light at the end of the tunnel. Any help from you is very much appreciated.

Essentially I have a change in icon from “ion-person” to “ion-person stalker” that is working very well.
I further have a class called blink that should get active when $scope.blinkUser = true. I see that the controller logic sets this up properly, but for some reason the animation just doesn’t happen.

If I add the blink class by default, i.e. not using ng-class conditionally, it works fine. Is there a problem with ngAnimate failing for ion-nav-buttons?

Please let me know if this is a known issue? I’ve googled a lot and tried many work arounds for many issues around ngClass and nav-bar, etc. but nothing seems to work :frowning:

Thanks,
-Ashish

menu.html:


  <ion-nav-buttons side="left">
    <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
    </button>
  </ion-nav-buttons>
  <ion-nav-buttons side="right">
    <button class="button button-clear button-icon" ng-class="{'blink': blinkUser, 'ion-person-stalker': superUser, 'ion-person': !superUser}">
    </button>
  </ion-nav-buttons>
</ion-nav-bar>

style.css:

@keyframes blink {  
  0% { color: red; }
  100% { color: black; }
}
@-webkit-keyframes blink {
  0% { color: red; }
  100% { color: black; }
}
.blink {
  -webkit-animation: blink 1s linear infinite;
  -moz-animation: blink 1s linear infinite;
  animation: blink 1s linear infinite;
} 

Code Pen Here:


Login First time with: “user”, "secret"
And then navigate to “Security”, you will get a pop-up for which you login with: “admin”, “secret”

The entire goal is to work like “sudo” where temporarily you have admin privileges and then for 10 seconds if you don’t move the mouse/touch the screen there is a timeout that will start the blink.
Please see messages in the console to see when the “start blink” messages have started. They will print once per second, and if there is still idle it will automatically logout from admin mode back to user mode.

The blink is to show the user that his time is running out due to idle/inactivity on the app window.


#2

So while this demo is though, there’s so much information going on it’s hard to know where to look. Chances are it’s a scoping issues, where you’re trying to set data on a particular view, but since that view has it’s own scope, it’s not reaching the parent view.

In this example, the buttons on the left are part of the view. So they have access to scope. On the right, similar to your example, the buttons are part of the main menu, so they don’t have access to that views scope.


#3

I simplified my demo and its working similar to what you have…the codepen on top has been modified to the new working reference :frowning:

While making the changes to the same codepen, I didnt realise that I would lose reference to the original codepen…so I am going to add back one thing at a time and recreate my original code pen.

The reason I am putting in this effort Mike is because I know there is something wrong somewhere in the framework which my original code was exposing. I only removed my Authentication Service and a bunch of pop ups - the rest of my scopes/references are the same…

Will write back when I recreate my issue and isolate it to a simple change…


#4

Hi Mike, so I’ve narrowed it down to the following:

  $scope.$on(ASHIYA_AUTH_EVENTS.warnSuperUserLogout, function(event, countdown) {
      console.log('start blinking');
      $scope.blinkUser = true;
      **$scope.$apply();**
  });

  $scope.$on(ASHIYA_AUTH_EVENTS.cancelWarnSuperUserLogout, function(event) {
    console.log('pause blinking');
    $scope.blinkUser = false;
    **$scope.$apply();**
  });

Essentially without the $scope.$apply() the change to the $scope.blinkUser is not getting set…I am unable to figure out why I need to explicitly call $scope.$apply. These events that need to trigger the blinkUser are coming from the ngIdle module - is there a particular pattern in the way those events are called that will cause the $digest() cycle to get missed?

Thanks for your help,
-Ashish