Question

我是这个框架的新手，正在努力理解范围。

我遵循了在自耕农网站上创建todo应用程序的基本步骤。

这是我的代码：

的index.html

<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="styles/main.css">
</head>
<body ng-app="mytodoApp">
    <div class="container" ng-include="'views/main.html'" ng-controller="MainCtrl"></div>
    <script>
        (function (i, s, o, g, r, a, m) {
            i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
                (i[r].q = i[r].q || []).push(arguments)
            }, i[r].l = 1 * new Date(); a = s.createElement(o),
            m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
        })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
        ga('create', 'UA-XXXXX-X');
        ga('send', 'pageview');
    </script>
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/json3/lib/json3.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="scripts/app.js"></script>
    <script src="scripts/controllers/main.js"></script>
</body>
</html>

Main.Html

<div class="container">
    <h2>My todos</h2>

    <!-- Todos input -->
    <form role="form" ng-submit="addTodo()">
        <div class="row">
            <div class="input-group">
                <input type="text" ng-model="todo" placeholder="What needs to be done?" class="form-control">
                <span class="input-group-btn">
                    <input type="submit" class="btn btn-primary" value="Add">
                </span>
            </div>
        </div>
    </form>
    <p></p>

    <!-- Todos list -->
    <div ui-sortable ng-model="todos">
        <p class="input-group" ng-repeat="todo in todos" style="padding: 5px 10px; cursor: move;">
            <input type="text" ng-model="todo" class="form-control">
            <span class="input-group-btn">
                <button class="btn btn-danger" ng-click="removeTodo($index)" aria-label="Remove">X</button>
            </span>
        </p>
    </div>
</div>

Main.js

'use strict';
angular.module('mytodoApp')
  .controller('MainCtrl', function ($scope) {
      $scope.todos = ['Item 1', 'Item 2', 'Item 3'];
      $scope.addTodo = function () {
          $scope.todos.push($scope.todo);
          $scope.todo = '';
      };
      $scope.removeTodo = function (index) {
          $scope.todos.splice(index, 1);
      };
  });

App.JS

'use strict';
angular
  .module('mytodoApp', []);

当我点击添加按钮时，$ scope.todo未定义，并且添加了一个显示空文本框的项目。

删除功能完全正常。

我想问题在于范围界定。任何人都可以关心这个指导我吗？

更新：

请在下面的屏幕中找到

enter image description here 我没有收到任何错误，而输出错误。

这是尝试添加新项目时的内容。

Answer 1

嘿，你在这里混合范围首先你有一个新项目的待办事项和ng-repeat中每个元素的另一个“相同”待办事项，你也不需要在内部重新定义ng-model转发器只是使用大括号表示法来引用范围。

更改名称ng-repeat，如：

<div>
        <p class="input-group" ng-repeat="element in todos" style="padding: 5px 10px; cursor: move;">
            <span>{{element}}</span>
            <span class="input-group-btn">
                <button class="btn btn-danger" ng-click="removeTodo($index)" aria-label="Remove">X</button>
            </span>
        </p>
    </div>

修改

这是你得到的工作版本

http://plnkr.co/edit/CrNrryNTiFFqzhWxaM7P

plnker code：

<!DOCTYPE html> <html ng-app="plunker"> <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.2.x" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script> <script src="app.js"></script> </head> <body ng-controller="MainCtrl"> <h2>My todos</h2>  <form role="form" ng-submit="addTodo()"> <div class="row"> <div class="input-group"> <input type="text" ng-model="todo" placeholder="What needs to be done?" class="form-control"> <span class="input-group-btn"> <input type="submit" class="btn btn-primary" value="Add"> </span> </div> </div> </form> <p></p>  <div ui-sortable ng-model="todos"> <p class="input-group" ng-repeat="element in todos" style="padding: 5px 10px; cursor: move;"> {{element}} <span class="input-group-btn"> <button class="btn btn-danger" ng-click="removeTodo($index)" aria-label="Remove">X</button> </span> </p> </div> </body> </html>

控制器：

var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope) { $scope.todos = ['Item 1', 'Item 2', 'Item 3']; $scope.addTodo = function () { $scope.todos.push($scope.todo); $scope.todo = ''; }; $scope.removeTodo = function (index) { $scope.todos.splice(index, 1); }; });

Answer 2

ngController在优先级500执行，而ngInclude在优先级400执行。

首先，ngController将创建一个范围，然后是ngInclude。也就是说，在您提供的HTML文件中，每次要访问控制器中作用域的变量时，您都需要使用$parent作为前缀，例如ng-submit="$parent.addTodo()"。

另一个解决方案（更好的恕我直言）是从具有ngInclude的div中删除ngController属性，并将其放在HTML文件中的周围div上：

<强>的index.html：

<div class="container" ng-include="'views/main.html'"></div>

<强> main.html中：

<div class="container" ng-controller="MainCtrl">
    ...
</div>

基本todo应用程序角js的麻烦

2 个答案: