AngularJS 选择 ng-change 函数未找到所选模型

Question

我在一些基本的角度数据绑定方面遇到了问题。

我的看法：

<select
    ng-model="selectedPerson"
    ng-options="person.name for person in testdataset"
    ng-change="personChanged(selectedPerson)">
    <option value="">All Persons</option>
</select>

我的控制器：

$scope.testdataset = [
    {name:"bill"},
    {name:"bob"},
    {name:"batman"}
];
$scope.personChanged = function(person) {
    console.log(person);
}

这很好用——记录了所选的名称。

但这只是在选择名称时打印“未定义”

查看：

<select
    ng-model="selectedPerson"
    ng-options="person.name for person in testdataset"
    ng-change="personChanged()">
    <option value="">All Persons</option>
</select>

控制器：

$scope.testdataset = [
    {name:"bill"},
    {name:"bob"},
    {name:"batman"}
];
$scope.personChanged = function() {
    console.log($scope.selectedPerson);
}

我是 Angular 的新手，我只是感到困惑。我假设它与函数内部 $scope 的“范围”有关，但我不确定如何排除故障......

Answer 1

在 cmets 中已经提到过，但您 selectedPerson 是 A 范围内的成员。不一定 控制器的范围 ($scope)。根据您的页面/应用程序的其余部分，selectedPerson 可能在不同的范围内。假设您在外部/上方使用ng-repeat（作为所显示代码的父级），那么selectedPerson 将作为该范围的成员存在，而不是控制器的范围。

作用域的工作方式非常简单，因为它继承自其父级。如果你在控制器的范围内放置一些东西——它将是该控制器的最外层范围（你的 html 中标记为ng-controller 的部分），除非你已经将该部分嵌套在另一个控制器中。最后是$rootScope，它是真正的最外层范围，所有其他范围都继承自该范围。

<div ng-controller="MainController">
    <div ng-repeat="item in items"> <!-- **This creates a new nested scope** -->
        <select ng-model="selectedPerson" ng-options="...">
        </select>
    </div>
</div>

使用上面的模板，你在控制器中的$scope 上的任何内容都可以在内部 div 和 select 本身中读取。 ng-model 虽然不能直接在控制器中读取。

如果您在控制器中执行此操作：

app.Controllers('MainController', function ($scope) {
  $scope.selectedPerson = {};
});

然后您将在外部作用域上创建一个对象，而您的 ng-model 将继承并引用同一个对象。但请注意，ng-repeat 中的每个选择都将使用 SAME selectedPerson。

我希望这能解释为什么？