unable to use timeout in angular js bootstrap in mvc

Question

index.cshtml

<!doctype html>
<html data-ng-app="ui.bootstrap.demo">
<head>

    <script src="~/Scripts/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
    <script src="~/Scripts/example.js"></script>

    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <div data-ng-controller="AlertDemoCtrl">
        <alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>
        <button class='btn btn-default' ng-click="addAlert()">Add Alert</button>
    </div>
</body>
</html>

example.js

    angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
    angular.module('ui.bootstrap.demo').controller('AlertDemoCtrl', function ($scope) {
        $scope.alerts = [
          { type: 'danger', msg: 'Oh snap! Change a few things up and try submitting again.' },
          { type: 'success', msg: 'Well done! You successfully read this important alert message.' }
        ];

        $scope.addAlert = function() {
            $scope.alerts.push({msg: 'Another alert!'});
        };

        $scope.closeAlert = function(index) {
            $scope.alerts.splice(index, 1);
        };

          $timeout(function () {
      $scope.alerts.splice($scope.alerts.indexOf(alert), 1);
  }, 3000); // maybe '}, 3000, false);' to avoid calling apply

unable to close the alert after 3 sec interval, anything wrong ?

I dont see you calling any type of timeout function, like setTimeout or angular's $timeout — Patrick Evans
– Patrick Evans, Commented May 24, 2015 at 3:42
to use any built in angular service you have to inject it in the controller where you want to use it. just like you injected the $scope, please inject the $timeout service then you'll be able to use it. otherwise you have to use raw javascript function "setTimeout" to achieve your expected behavior. — Md. Mahbubul Haque
– Md. Mahbubul Haque, Commented May 24, 2015 at 4:48
@MahbubulHaque but how in my example ? can you post answer ? thanks — Neo
– Neo, Commented May 24, 2015 at 5:37
@ Neo : I've posted the answer using your code, I've just injected the $timeout service to your controller. If your other codes are OK then $timeout service will work and it will execute the function after your defined time. — Md. Mahbubul Haque
– Md. Mahbubul Haque, Commented May 24, 2015 at 5:51

Md. Mahbubul Haque · Accepted Answer · 2015-05-24 05:55:46Z

4

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo')
    .controller('AlertDemoCtrl', function ($scope, $timeout) { //here I've just injected the $timeout service to your controller. if your other codes are ok then this $timeout will work
        $scope.alerts = [
          { type: 'danger', msg: 'Oh snap! Change a few things up and try submitting again.' },
          { type: 'success', msg: 'Well done! You successfully read this important alert message.' }
        ];

        $scope.addAlert = function() {
            $scope.alerts.push({msg: 'Another alert!'});
        };

        $scope.closeAlert = function(index) {
            $scope.alerts.splice(index, 1);
        };

        $timeout(function () {
          $scope.alerts.splice($scope.alerts.indexOf(alert), 1); // you are using 'alert' to get the specific alert in alerts array of object, but you haven't passed/defined 'alert' anywhere. so how can you get this alert? and how can it be removed. Please pass/define 'alert', which is the portion you would know better. Then your code will work.
        }, 3000); // maybe '}, 3000, false);' to avoid calling apply

edited May 24, 2015 at 5:55

answered May 24, 2015 at 5:48

Md. Mahbubul Haque

80010 silver badges18 bronze badges

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

1 Comment

Md. Mahbubul Haque Over a year ago

Within $timeout code block, you are using 'alert' to get the specific alert in alerts array of object, but you haven't passed/defined 'alert' anywhere. so how can you get this alert? and how can it be removed. Please pass/define 'alert', which is the portion you would know better. Then your code will work.

Yashika Garg · Accepted Answer · 2015-05-24 07:06:09Z

You need to include "$timeout" dependency in your controller.
As mentioned by @Mahbubul Haque, "alert" is undefined inside your timeout.
Your $timeout instance should be destroyed on $destroy of scope

If you requirement is to close one alert after every 3 secs, you can do something like this:

    angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
    angular.module('ui.bootstrap.demo').controller('AlertDemoCtrl', function ($scope, $timeout) {                           
          var timeoutInstance;
          $scope.alerts = [
            { type: 'danger', msg: 'Oh snap! Change a few things up and try submitting again.' },     
            { type: 'success', msg: 'Well done! You successfully read this important alert message.' }
        ];
        $scope.addAlert = function() {   
            $scope.alerts.push({msg: 'Another alert!'});
         };
         $scope.closeAlert = function(index) {         
            $scope.alerts.splice(index, 1);
         };

         $scope.index = 0;
         timeoutIntance = $timeout(function () {
              $scope.alerts.splice(index, 1);
              ++$scope.index;
         }, 3000);

         $scope.$on("$destroy", function(){
              if(angular.isDefined(timeoutInstance)){
                 $timeout.cancel(timeoutInstance);
                 timeoutInstance = null;
              }
         });

Collectives™ on Stack Overflow

unable to use timeout in angular js bootstrap in mvc

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related