AngularJS作用域变量始终未定义

Question

这听起来像是一个愚蠢的问题，但我在这个问题上呆了几个小时。我必须忽略了一些非常简单的事情。

我有一个ng-repeat指令，该指令正在输出项目列表：

<div ng-controller="MyCtrl">
    <div ng-repeat="foo in bars">
    ....
    </div>
</div>

然后在列表的末尾，我有一个表单要添加到列表中：

<div class="add">
    <input ng-model="valueToAdd" class="weight" />
    <a ng-click="addStuff()" class="button-small"> + Add</a>    
</div>

addStuff()方法在我的控制器上：

function MyCtrl($scope) {
    $scope.addStuff= function () {
        alert($scope.valueToAdd);
    }
}

但是$scope.valueToAdd总是给我undefined。

我想念什么？

编辑：这是一个重复出现此问题的朋克：http://plnkr.co/edit/YoGdx8?p=preview

Answer 1

ng-repeat为它的每个重复部分创建新作用域，因此valueToAdd绑定到该内部作用域上的变量，该变量是外部作用域的子级。当调用addStuff时，它之所以起作用是因为它通过作用域继承访问外部作用域上的方法，但是它尝试引用的变量未在该外部作用域中定义。

尝试将值传递给addStuff：

ng-click="addStuff(valueToAdd)"

Here is a forked Plunk