CODEWITHSUNDEEP
javascriptasp.net-mvcangularjstwitter-bootstrap
Neo
Neo

Reputation: 16219

unable to use timeout in angular js bootstrap in mvc

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 ?

Upvotes: 2

Views: 383

Answers (2)

Yashika Garg
Yashika Garg

Reputation: 2366

  1. You need to include "$timeout" dependency in your controller.
  2. As mentioned by @Mahbubul Haque, "alert" is undefined inside your timeout.
  3. 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;
              }
         });

Upvotes: 2

Md. Mahbubul Haque
Md. Mahbubul Haque

Reputation: 800

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

Upvotes: 4

Related Questions