AngularJS，绑定范围的情况下？

一尘不染

AngularJS，绑定范围的情况下？

angularjs

为了掌握AngularJS，我决定使用其中一个示例，特别是在Todo示例中简单地添加一个“
complete”屏幕，当用户输入5个todo时，它会使用一个切换案例切换到另一个div。
。如果有任何用处，可以在这里找到代码 http://jsfiddle.net/FWCHU/1/。

但是，似乎每个开关盒都有其自己的作用域（$ scope.todoText不可用），但是在这种情况下，可以使用addTodo（）中的“
this”来访问它。到目前为止，一切都很好，但是说我想在开关盒之外访问todoText（在开关盒内），我该怎么做呢？我是否可以将切换用例范围绑定到模型，是否可以通过其他方式访问它，还是应该以其他方式解决？

PS。我没有尝试找到上述代码的任何解决方案，我敢肯定我知道如何在不使用切换用例的情况下解决该问题，我想了解这种情况下作用域的作用！

阅读 236

2020-07-04

共1个答案

一尘不染

马克有一些很棒的建议！确保您还签出了AngularJS Batarang
Chrome扩展程序，以查看各种范围及其值（以及其他内容）。请注意，它似乎无法与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 = '';
};

看看这个小提琴，请注意，当您键入内容时，显示在文本框下方的文本正在访问todoText.text外部作用域。

如果您将代码改回使用原始类型（如该小提琴），则父作用域todoText将不会反映您对文本框所做的任何更改。这可能与JavaScript复制参考值的方式有关，而与AngularJS无关。

2020-07-04