angularjs - 在 AngularJS 中更改数组后 View 未更新

Question

在 AngularJS 中，我试图向数组添加一个新项目。该项目已正确添加，但显示未反射(reflect)更改。

添加新任务:

 $scope.addNewTask = function() 
 {  
    console.log( "Before: " + $scope.tasks.length );

    $scope.newTask = [
        {
            id:     '3',
            title:  'Get answer'
        }
    ];

    $scope.tasks.push( $scope.newTask[0] );

    console.log( "After: " + $scope.tasks.length ); // one more than before
};

任务数组:

$scope.tasks = [
    {
        id:     '1',
        title:  'Run into problem'
    },
    {
        id:     '2',
        title:  'Ask question'
    }
];

查看:

<ul>
    <li ng-repeat="task in tasks>
        {{ task.id }} {{ task.title }}
    </li>
</ul>

虽然我可以在控制台上看到添加了新项目，但列表并未更新以反射(reflect)更改。

编辑:不知道这是否有什么区别，但是在单击表单的提交按钮时调用该函数，如下所示:

<form class="newtask-form" ng-submit="addNewTask()">
    <input type="submit" name="submit" value="Add new task" />
</form>

Answer 1

所以，我解决了。问题是这样的:在我的代码中，我在 ng-view 之外手动设置 ng-controller。但是，通过路由器， View 的 Controller 被设置为同一个 Controller 。

所以我相信发生的事情是我有两个嵌套的 Controller 对象，一个包含通过表单提交更改的任务，另一个包含通过 li 显示的任务。

最终，看起来我需要重组我的应用程序并开始为我的数据使用服务，而不是将其全部填充到我的 Controller 中(任何有关服务的良好介绍都值得赞赏)。但至少现在我知道问题出在哪里。