Question

我正在构建一个简单的Angular测试应用程序并遇到了问题。我有一个项目列表和列表底部的“添加项目”链接（列表存储在一个简单的NodeJS服务器上）。此“添加项目”链接加载子视图，该视图允许用户设置新项目的名称。当用户单击完成时，该项目将添加到服务器上的列表中，然后告知父列表进行更新。在控制台中，我可以看到数据正在传递回父级，但视图没有反映新的项目列表。我已经调查了$ scope。$ apply但由于我从不使用第三方库我没有理由使用它（我已经尝试了它并且它总是给出错误“$ digest已经在运行”，这看起来似乎是预期的在文档）。这是有问题的代码：

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但我似乎无法弄明白。谢谢你的帮助！

Answer 1

'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（）就足够了，只要此作用域与定义更新函数的父作用域之间没有指令就构成了一个隔离的作用域。

Angular JS - 当范围更改时，父视图不会更新

1 个答案: