在AngularJS中更改为数​​组后查看未更新

Question

在AngularJS中，我试图将新项添加到数组中。该项目已正确添加，但显示不反映更改。

添加新任务：

 $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>

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

编辑：不知道它是否有任何区别，但是单击表单的提交按钮时会调用该函数，如下所示：

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

Answer 1

所以，我解决了。问题是这样的：在我的代码中，我在ng-view之外手动设置ng-controller。但是，通过路由器，视图的控制器设置为相同的控制器。

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

最终，看起来我需要重构我的应用程序并开始为我的数据使用服务，而不是将其全部填充到我的控制器中（任何关于服务的好介绍都表示赞赏）。但至少现在我知道问题是什么。

Answer 2

尝试在ng-click上使用input，而不是表单上的ng-submit。

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

不确定这是否应该有所作为，但这是我唯一能想到的（除了调用你已经做过的scope.$apply()之外。