使用AngularJS创建一个简单的ToDo应用程序,显示$ controller:ctrlreg错误

时间:2018-01-10 10:32:10

标签: javascript angularjs

我正在尝试使用AngularJS创建一个To-Do应用程序,但它说的是与

相关的错误
  

错误:$ controller:ctrlreg,

有向链接说:

  

未注册具有此名称的控制器。

下面是我的脚本代码。

angular.module('todoApp', [])
  .controller('todoController', function($scope) {
    $scope.tasks = [];
    $scope.add = function() {
      $scope.tasks.push($scope.title);
    }
  })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<br>
<div ng-app="todoApp" ng-controller="todoController"><br>
  <input ng-model="title"><button ng-click="add()">Add</button>
    <br><li ng-repeat="t in tasks">{{t}}</li>
<br>
</div>

2 个答案:

答案 0 :(得分:1)

检查一下:plnkr

index.html

<!DOCTYPE html>
<html >

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
    <script src="app.js"></script>
  </head>

  <body ng-app="plunker" ng-controller="MainCtrl">
    <input ng-model="title"><button ng-click="add()">Add</button>
    <br><li ng-repeat="t in tasks">{{t}}</li>
  </body>

</html>

<强> app.js

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.tasks = [];
    $scope.add = function() {
      $scope.tasks.push($scope.title);
    }
});

答案 1 :(得分:0)

这是你的代码正常运行,

angular.module('todoApp', [])
    .controller('todoController', function($scope){
        $scope.tasks = [];
        $scope.add = function() {
            $scope.tasks.push($scope.title);
            $scope.title = ''
        }
    })
<!DOCTYPE html>
<html ng-app="todoApp" >

  <head>
    <meta charset="utf-8" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
    <script src="app.js"></script>
  </head>

<div ng-controller="todoController">
    <input ng-model="title"><button ng-click="add()">Add</button>
    <li ng-repeat="t in tasks">{{t}}</li>
</div>
  </body>

</html>