Question

我正在学习这里的教程：http://www.youtube.com/watch?v=iUQ1fvdO9GY同时学习自耕农和角色。

我已经到了http://www.youtube.com/watch?v=iUQ1fvdO9GY#t=266并且他的例子在哪里工作，我的并不是因为一些范围问题。

main.html中

<div class="jumbotron">
  <h2>My Todos:</h2>
  <p ng-repeat="todo in todos">
    <input type="checkbox" ng-model="todo.done">
    <span>{{todo.text}}</span>
  </p>

  <form ng-submit="addTodo()">
    <input type="text" ng-model="newTodoText" size="20">
    <input type="submit" class="btn btn-primary" value="add">
  </form>
</div>

main.js

'use strict';

var myApp = angular.module('todoAppApp');

myApp.controller('MainCtrl', ['$scope', function ($scope) {

    $scope.todos = [
        {text: 'Item 1', done: false},
        {text: 'Item 2', done: true},
        {text: 'Item 3', done: false}
    ];

    $scope.addTodo = function() {
        $scope.todos.push({text: $scope.newTodoText, done: false});
        $scope.newTodoText = '';
    };
}]);

出于某种原因，newTodoText变量位于main.js中$ scope范围内。这是使用Batarang确认的。由于缺乏代表，我无法发布图片，但在Batarang中，有：

Scope001 > Scope002 > Scope003(which is the $scope I have access to in the js) > Scope004 > {Scopes for each of the todos}

Scope003具有原始todos数组和addTodo()函数。当您在输入表单中键入时，Scope004具有newTodoText文本。点击添加后，addTodo()被正确调用，但$ scope不包含newTodoText，因为它在Scope004中。

由于我对框架的新颖性以及此处的实际准系统实现，我显然在这里遗漏了一些简单的东西。我的Google-fu几乎没有结果。

编辑：好的，所以在index.html中，它包含行

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

包括main.html。我用div中包含的main.html的文字内容替换了该行

<div class="container" ng-controller="MainCtrl">
    <!-- contents of main.html from above -->
</div>

神奇地我的范围问题得到了解决。为什么从一个单独的文件中包含main.html与范围混乱？

编辑＃2

很酷，我想通了。

事实证明ng-include创建了一个新范围，这与我的想法相反（我假设它相当于文字html注入）。所以我只是将ng-controller="MainCtrl"从index.html（Scope003）中的.container div移动到main.html中的.jumbotron div。

感谢您的帮助，我现在对范围了解得更多！

Answer 1

ng-include创建了一个新范围。因此，我将ng-controller="MainCtrl"从.container中的index.html div（Scope003）移至.jumbotron内的main.html div。

基本Yeoman Angular Todo应用程序中的范围问题

1 个答案: