Busy Icon keeps running - AngularJS

Question

I have implemented a code to show a busy icon and this is it

angular.module("app", [])

    .controller('UploadCtrl', function ctrl ($scope, $timeout) {
        $scope.busy = false;

        $scope.submit = function () {
            $scope.busy = true;

            // pretend to make an http call...
            $timeout(function () {
                $scope.busy = false;
            }, 10000);
        };
    });

This is the index.html file

<!DOCTYPE html>
<html>
<head>
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
    <script src="app.js"></script>
    <meta charset="utf-8">
    <title>Busy Runner</title>
</head>
<body ng-app="app" ng-controller="ctrl">
    <button ng-disabled="busy" ng-click="submit()">Submit <i class="fa fa-spinner fa-spin" ng-show="busy"></i></button>
</body>
</html>

When I run the code the busy loader keeps running. Please what could be wrong. This is the plunk I have made. view plunk

What's wrong? The spinner stops after 10 seconds as designed. — Michael
– Michael, Commented Oct 13, 2015 at 11:18
Maybe you should tell us what you try to do. It starts the spinner when you click the button. What do you expect? — Michael
– Michael, Commented Oct 13, 2015 at 11:20
Also take a look: plnkr.co/edit/qkSUDrA6jP4Y0nKvexe6?p=preview. This is achieved embedding it in a controller. And it keeps spinning by default — Blaze
– Blaze, Commented Oct 13, 2015 at 11:24

Michael · Accepted Answer · 2015-10-13 11:37:45Z

1

You reference a controller which not exists. Fix the HTML code

<body ng-app="app" ng-controller="UploadCtrl">

answered Oct 13, 2015 at 11:37

Michael

3,1141 gold badge19 silver badges17 bronze badges

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

Comments

Vasu Sheoran · Accepted Answer · 2015-10-13 11:54:51Z

1

angular.module("app", [])

    .controller('UploadCtrl', function ctrl ($scope, $timeout) {
        $scope.busy = false;

In the above code you have name your controller as 'UploadCtrl' ,where as, in HTML file

<body ng-app="app" ng-controller="ctrl">

controller is 'ctrl' , due to which it can't load the controller hence the angular part is not executed.

Change your app.js to

angular.module("app", [])
    .controller('ctrl', function ($scope, $timeout) {..}

View plunkr

Also I removed ng-disabled from <button ng-disabled="busy" ng-click="submit()">Submit since you are already using $scope.busy = false; as soon as script loads.

Checkout ngController .

edited Oct 13, 2015 at 11:54

answered Oct 13, 2015 at 11:37

Vasu Sheoran

2151 silver badge6 bronze badges

Collectives™ on Stack Overflow

Busy Icon keeps running - AngularJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related