AngularJS，绑定开关案例的范围? [英] AngularJS, bind scope of a switch-case?

问题描述

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

To get a grip on AngularJS I decided to play around with one of the examples, specifically, simply adding a "complete" screen to the Todo-example, when the user has entered 5 todos it uses a switch-case to switch to another div. Code is available here http://jsfiddle.net/FWCHU/1/ if it's of any use.

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

However, it appears that each switch-case gets its own scope ($scope.todoText is not available), however it can be accessed using "this" from within addTodo() in this case. So far so good, but say I want to access todoText (which is inside the switch-case) outside of the switch-case, how would I go about doing that? Can I bind the switch-case scope to the model perhaps, is it accessible in some other way or should this be solved in some other way?

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

PS. I'm not trying to find ANY solution to the code above, I'm pretty sure I know how to solve it without using switch-cases, I want to understand how scopes work in this case!

推荐答案

Mark 提出了一些很好的建议！确保您还查看了 AngularJS Batarang Chrome 扩展程序 以查看各种范围及其值(除其他外).请注意，它似乎不适用于 jsFiddle.

Mark has some great suggestions! Make sure you also check out the AngularJS Batarang Chrome Extension to see the various scopes and their values (among other things). Note it doesn't appear to work well with jsFiddle.

我不确定如何直接访问内部作用域，但这是通过绑定到对象而不是基元来访问外部作用域中相同文本的一种方法.

I'm not sure how to access inner scopes directly but here is one way to access the same text in the outer scope by binding to an object instead of a primitive.

1) 将 todoText 声明为对象而不是控制器中的原语:

1) Declare todoText as an object instead of a primitive in your controller:

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

2) 绑定到 todoText.text 而不是 todoText:

2) Bind to todoText.text instead of just 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:

3) Modify the existing functions to use 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.

Take a look at this fiddle and note that the text displayed beneath the textbox when you type something in is accessing the todoText.text on the outside scope.

如果您将代码改回使用原语(如this fiddle)，则父级scope todoText 不会反映您对文本框所做的任何更改.这可能更多地与 JavaScript 复制引用值的方式有关(参见 这篇文章 了解更多信息)而不是 AngularJS 特定的东西.

If you change the code back to use a primitive (like in this fiddle) the parent scope todoText won't reflect any changes you make to the textbox. This is likely more to do with how JavaScript copies reference values (see this post for more info) and less an AngularJS specific thing.

这篇关于AngularJS，绑定开关案例的范围?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！