简单的应用程序不绑定到范围

Question

我在 AngularJS 中从待办事项列表模板开始编写了一个简单的第一个应用程序。 None 定义的函数绑定范围（添加新任务或编辑当前任务一次）。我在控制器的所有范围内经常做错什么？

提前致谢。

这是我的 HTML:

<!DOCTYPE html>
<html>

  <head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.8/angular.js"></script>
    <script src="js/script.js"></script>

    <link href='//fonts.googleapis.com/css?family=Roboto:100,300' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/style.css" />
  </head>

  <body>
    <div class="page-container">

     <h2>Todo</h2>

     <ul class="todo-list" ng-repeat="todo in todos track by $index">
        <li>
          <span>{{ todo }}</span>
          <button class="bt bt-achieve" ng-click="done(todo)">Done</button>
        </li>
      </ul>

    </div>

    <ul class="add-todo">
        <li>
          <input type="text" class="txt" placeholder="New Todo" ng-model="newTodo" ng-keyup="add($event)" />
        </li>
    </ul>

  </body>

</html>

还有我的 JS 脚本：

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

app.controller('TodoCtrl', function($scope) {
  $scope.newTodo = '';

  $scope.todos = [
    'Maged Task', 
    'Essam Task',
    'Ashraf Task'
  ];

  $scope.done = function(todo) {
    var indexOf = $scope.todos.indexOf(todo);
    if (indexOf !== -1) {
      $scope.todos.splice(indexOf, 1);
    }
  };

   $scope.add = function(e) {
    if (e.which && e.which === 13) {
      $scope.todos.push($scope.newTodo);
      $scope.newTodo = '';
    }
  };
});

Answer 1

您尚未绑定到 angular 应用程序或控制器。

尝试

<body ng-app="ToDo" ng-controller="TodoCtrl">

Answer 2

将<body>更改为<body ng-app="Todo" ng-controller=TodoCtrl>

Answer 3

将正文标签更改如下

<body ng-app="Todo" ng-controller="TodoCtrl" >

我总是喜欢在 ng-init 方法中提供初始数据。

在您的代码中，您可以使用 $scope.todos 的初始数据，如下所示。

html代码：

<body ng-app="Todo" ng-controller="TodoCtrl" ng-init="initialData()" >

javascript代码

内部控制器

 $scope.initialData = function(){

  $scope.newTodo = '';

  $scope.todos = [
    'Maged Task', 
    'Essam Task',
    'Ashraf Task'
  ];

}

简单的应用程序不绑定到范围

Simple app doesn't bind to scope

javascript

angularjs

angularjs-scope