Question

我已经实现了一个代码来显示一个忙碌的图标，这就是它

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);
        };
    });

这是index.html文件

<!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>

当我运行代码时，繁忙的加载器继续运行。请问有什么不对。这是我所做的。 view plunk

Answer 1

angular.module("app", [])

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

在上面的代码中，您将控制器命名为“UploadCtrl”，在HTML文件中将其命名为

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

控制器是'ctrl'，由于它无法加载控制器，因此不执行角度部分。

将您的app.js更改为

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

查看plunkr

此外，我从<button ng-disabled="busy" ng-click="submit()">Submit删除了ng-disabled，因为一旦脚本加载，您就已经在使用$scope.busy = false;。

结帐ngController。

Answer 2

您引用不存在的控制器。修复HTML代码

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

忙碌的图标一直在运行 - AngularJS

2 个答案: