AngularJS $timeout service

Question

I have to have something visible for 3-4 seconds. I am trying to use $timeout for achieving that. Here's what I got so far:

$timeout(function() {
  debugger;
  $scope.$on(broadcastService.topErrorBar.show,
  function(event, message) {
    $scope.rootElement.addClass('is-visible');
    $scope.isVisible = true;
    $scope.message = message;
  });
}, 3000);

$timeout.cancel(function() {
    $scope.close();
});

$scope.close = function() {
  $scope.rootElement.removeClass('is-visible');
  $scope.isVisible = false;
};

This is not working and I'm not able to resolve the issue. What am I doing wrong? Should I use a timeout in this case.

Dan M. CISSOKHO · Accepted Answer · 2016-09-06 13:07:01Z

2

what about:

$scope.$on(broadcastService.topErrorBar.show,
      function(event, message) {
          $scope.isVisible=false; 
           $timeout(function () { $scope.isVisible= true; }, 3000); 
      });

you have to use in html ng-show="isVisible">

answered Sep 6, 2016 at 13:07

Dan M. CISSOKHO

1,0851 gold badge14 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

KCarnaille Over a year ago

Best solution imo.

mkkhedawat · Accepted Answer · 2016-09-06 13:17:10Z

1

It should be like this :

$scope.$on(broadcastService.topErrorBar.show,
  function(event, message) {
    $scope.rootElement.addClass('is-visible');
    $scope.isVisible = true;
    $scope.message = message;
    $timeout(function() {
    $scope.close();
}, 3000);

$scope.close = function() {
  $scope.rootElement.removeClass('is-visible');
  $scope.isVisible = false;
};

On Broadcast , make element visible , start a timeout so that after 3 seconds $scope.close will be called. No need for $timeout.cancel in your case.

answered Sep 6, 2016 at 13:17

mkkhedawat

1,7272 gold badges20 silver badges36 bronze badges

Comments

deltree · Accepted Answer · 2016-09-06 13:17:18Z

1

Your logic is inverted. The function in a timeout fires after the time has elapsed. You want the element to be visible, and then set visibility to false in your timeout function. Here's an example.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
    $scope.visible = true;
    $timeout(function () {
      $scope.visible = false;
      }, 3000);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  This is always visible.
  <span ng-show="visible">This should hide after 3 seconds</span>
</div>

answered Sep 6, 2016 at 13:17

deltree

3,8242 gold badges34 silver badges53 bronze badges

Collectives™ on Stack Overflow

AngularJS $timeout service

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related