AngularJS,绑定switch-case的范围?

前端之家收集整理的这篇文章主要介绍了AngularJS,绑定switch-case的范围?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
为了掌握AngularJS,我决定使用其中一个示例,特别是,只需在Todo示例中添加一个“完整”屏幕,当用户输入5个todos时,它使用一个switch-case切换到另一个div .如果有任何用途,可在此处获取代码 http://jsfiddle.net/FWCHU/1/.

但是,似乎每个switch-case都有自己的范围($scope.todoText不可用),但是在这种情况下可以使用addTodo()中的“this”来访问它.到目前为止一切都那么好,但是我想要在switch-case之外访问todoText(在switch-case里面),我该怎么做呢?我是否可以将switch-case范围绑定到模型,是否可以通过其他方式访问,还是应该以其他方式解决

PS.我不是要找到上面代码的任何解决方案,我很确定我知道如何在不使用switch-case的情况下解决它,我想了解范围在这种情况下如何工作!

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

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

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

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

看看this fiddle并注意当你输入内容时文本框下面显示的文本是访问外部作用域上的todoText.text.

如果您更改代码以使用原语(如this fiddle中所示),则父范围todoText将不会反映您对文本框所做的任何更改.这可能更多地与JavaScript复制引用值的方式有关(更多信息请参见this post),而不是AngularJS特定的事情.

猜你在找的Angularjs相关文章