我正在构建一个简单的 Angular 测试应用程序并遇到了问题。我有一个项目列表和列表底部的“添加项目”链接（该列表存储在一个简单的 NodeJS 服务器上）。这个“添加项目”链接加载一个子视图，让用户设置新项目的名称。当用户单击完成时，该项目将添加到服务器上的列表中，然后告诉父列表进行更新。在控制台中，我可以看到数据正在传递回父级，但视图没有反映新的项目列表。我已经查看了 $scope.$apply 但由于我从未使用过第三方库，所以我没有理由使用它（我已经尝试过了，它总是给出错误“$digest is already running”，这在查看后似乎是预期的在文档中）。这是有问题的代码：
HTML 父列表
<ul data-ng-controller="listCntrl">
<li data-ng-repeat="item in items">
<a href="#/item/{{item.name}}">{{item.name}}</a>
</li>
<li><a href="#/new">Add Item</a></li>
</ul>
<div data-ui-view></div> <!--Child view loaded here-->
HTML 子视图
<div data-ng-controller="newItemCntrl">
<input type="text" data-ng-model="name"></input>
<a data-ng-click="addItem()">Done</a>
</div>
控制器
app.controller('listCntrl',function($scope, ListFactory){
ListFactory.getItems().success(function(data){
$scope.items = data;
});
$scope.update = function(){
ListFactory.getItems().success(function(data){
console.log(data); //The correct list is in data
$scope.items = data; //This doesn't cause the view to update!
});
}
});
app.controller('newItemCntrl',function($scope){
$scope.addItem = function(){
$http({
method: 'POST',
url: '/addItem',
data: JSON.stringify( {name: $scope.name} ),
headers: {'Content-Type': 'application/json'},
})
.success(function(){
$scope.$parent.update();
});
}
});
工厂
app.factory('ListFactory', function($http){
return {
getItems: function(){
return $http({
method: 'POST',
url: '/getItems',
headers: {'Content-Type': 'application/json'}
});
}
}
});
一切都在服务器端工作，在 update() 函数中它打印出更新的列表，但不知何故 $scope.items 分配不会导致列表视图更新。如果我刷新页面，那么列表会正确显示。我在这里做错了什么？我猜这是我对 $scope.$parent 理解的问题，但我似乎无法弄清楚。谢谢你的帮助！