1

我正在构建一个简单的 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 理解的问题，但我似乎无法弄清楚。谢谢你的帮助！

4

1 回答 1

3

'listCntrl' 控制器位于元素上，而 'newItemCtrl' 绑定到 data-ui-view 的子视图，它是元素的兄弟，而不是子视图。

因此，在 newItemCtrl 中创建的范围没有 listCntrl 在其父链中创建的范围。

尝试这样的事情：

<div data-ng-controller="listCntrl">
    <ul>
        <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-->
</div>

顺便说一句，在这种情况下，您实际上不需要使用 $scope.$parent。所有子作用域（但不是孤立作用域）都从其父作用域继承原型，即scope.__proto__ === scope.$parent. 只需使用 $scope.update() 就足够了，只要此范围和定义更新函数的父范围之间没有指令构成隔离范围。

于 2013-07-11T01:18:25.920 回答