AngularJS，开关盒的绑定(bind)范围？

Question

为了掌握 AngularJS，我决定尝试其中一个示例，具体来说，只需向 Todo 示例添加一个“完整”屏幕，当用户输入 5 个 todo 时，它使用 switch-case 切换到另一个 div .此处提供代码 http://jsfiddle.net/FWCHU/1/如果它有任何用处。

但是，似乎每个 switch-case 都有自己的范围($scope.todoText 不可用)，但是在这种情况下，可以使用 addTodo() 中的“this”访问它。到目前为止一切顺利，但是说我想在 switch-case 之外访问 todoText(在 switch-case 内部)，我将如何去做呢？我是否可以将 switch-case 范围绑定(bind)到模型，它是否可以通过其他方式访问，或者应该以其他方式解决？

PS。我是 不是 试图找到上述代码的任何解决方案，我很确定我知道如何在不使用 switch-cases 的情况下解决它，我想了解作用域在这种情况下是如何工作的!

Answer 1

马克有一些很棒的建议!确保您还查看了 AngularJS Batarang Chrome Extension查看各种范围及其值(除其他外)。请注意，它似乎不适用于 jsFiddle。

我不确定如何直接访问内部范围，但这是通过绑定(bind)到对象而不是原语来访问外部范围中相同文本的一种方法。

1) 声明todoText作为对象而不是 Controller 中的原语:

$scope.todoText = {text: ''};

2) 绑定(bind)todoText.text而不仅仅是 todoText :

<form ng-submit="addTodo()">
    <input type="text" ng-model="todoText.text" size="30" placeholder="add new todo here">
    <input class="btn-primary" type="submit" value="add">
</form>

3) 修改现有功能使用todoText.text :

$scope.addTodo = function() {
    $scope.todos.push({text:$scope.todoText.text, done:false, width: Math.floor(Math.random() * 100) + 50});
    $scope.todoText.text = '';
};

看看this fiddle请注意，当您输入内容时，文本框下方显示的文本正在访问 todoText.text在外部范围。

如果您将代码改回使用原语(如 this fiddle 中)，则父范围 todoText不会反射(reflect)您对文本框所做的任何更改。这可能更多地与 JavaScript 如何复制引用值有关(参见 this post 了解更多信息)，而不是 AngularJS 特定的事情。