AngularJS，绑定的switch-case范围？ [英] AngularJS, bind scope of a switch-case?

问题描述

要得到AngularJS我决定玩弄的一个例子一握，具体而言，只需添加一个完成屏幕待办事项，例如，当用户输入5待办事项它采用了开关的情况下切换另一个DIV。 code是可以在这里 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.

然而，似乎每一个开关的情况下获得其自己的范围（$ scope.todoText不可用），然而它可以使用来访问这从内addTodo（）在这种情况下。到目前为止好，但说我要外部访问开关的情况下todoText（这是开关盒内），我怎么会去这样做？我可以开关情况范围该模型也许绑定，它是在一些其他的方式访问或本应以其他方式解决？

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?

PS。我的不可以试图找到上述任何解决方案到code，我是pretty确信我知道如何解决它，而无需使用开关的情况下，我想了解如何范围工作在这种情况下！

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!

推荐答案

标记有一些很好的建议！请确保您还检查出href=\"https://chrome.google.com/webstore/detail/ighdmehidhipcmcojjgiloacoafjmpfk\"> AngularJS Batarang Chrome扩展的看到不同范围和它们的值的

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 ：

<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 = '';
};

看看这个小提琴并注意显示的文本框下方的文本时，你输入的东西中访问 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.

如果你改变了code回（在这个小提琴等）的父范围<$使用原始的C $ C> todoText 将不会反映您对文本进行任何更改。这可能更多的是与JavaScript的拷贝参考值如何（见<一href=\"http://stackoverflow.com/questions/518000/is-javascript-a-pass-by-reference-or-pass-by-value-language\">this发布获得更多信息）和更低的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，绑定的switch-case范围？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！