Question

我正在努力学习Angular。我要做一个待办事项清单。我希望能够从我的列表中删除家务。我相信我正在从我的杂项对象数组中正确删除它们。但是，我阅读了，似乎我必须使用scope.$apply();才能更新$ scope，并在删除内容时将其从视图中的列表中删除。但是，当我添加该行时，angular会抛出一条不可读的痕迹：

以下是忽略bower_components和node_modules的github帐户：https://github.com/EdmundMai/angular_todolist

这是我的控制器中的功能：

toDoListApp.controller("ChoresController", function($scope) {
    $scope.chores = [{
        name: "laundry",
        hours: 3
    },
    {
        name: "dishes",
        hours: 0.5
    }
    ];
    $scope.submit = function() {
        if ($scope.chore.name) {
            $scope.chores.push({name: $scope.chore.name, hours: 2});
            $scope.chore.name = '';
        } else {
            alert("none");
        }
    };
    $scope.removeChore = function(unwanted_chore) {
        var index = $scope.chores.indexOf(unwanted_chore);
        alert($scope.chores.length);
        $scope.chores.splice(index, 1);
        alert($scope.chores.length);
        $scope.$apply();
    };
});

我的观点是：

<form ng-submit="submit()">
    <input type="text" name="chore_name" ng-model="chore.name">
    <input type="submit" id="submit" value="Submit" />
</form>

<div ng-repeat="chore in chores | filter:chore.name" ng-controller="ChoresController">
    {{ chore.name }} - {{ chore.hours }} <a href="#blah" ng-click="removeChore(chore)">X</a>
</div>

=== 更新 ===

当我尝试“x”洗衣物品时看起来很奇怪，菜肴仍在$ scope.chores中，但是当我点击菜肴上的“x”时（理论上应该清空阵列），它说洗衣物品仍然留在家务......我是否错误地删除了该项目????

Answer 1

正如评论中所述，您应该能够在不使用$apply的情况下完成此操作，但是您使用的方法不正确。它需要一个功能，完成后将更新视图。尝试类似：

$scope.removeChore = function(unwanted_chore) {
    $scope.apply(function () {
        var index = $scope.chores.indexOf(unwanted_chore);
        alert($scope.chores.length); // prints 2
        $scope.chores.splice(index, 1);
        alert($scope.chores.length); // prints 1
    });
};

Answer 2

首先，ng-repeat中的| filter:chore.name没有意义，您正在使用表单中的input元素添加新的杂项，但将其用作ng-repeat中的过滤器。这应该解释闪烁。如果您搜索并删除杂项，这可能会使您的索引失效。检查这个插件 - 它有你的所有代码减去过滤器。 http://plnkr.co/edit/64VxMQeq9zKZhfEcPHpd?p=preview

在这种情况下，您不需要$apply。 $apply用于在摘要中运行非角度内容。

Answer 3

当您点击该链接时，#blah将添加到当前位置。这反过来导致路由服务做出反应。

它想要更改为路由blah，并且由于没有定义此类路由，因此需要otherwise路由。这意味着视图被重新加载（而不是刷新），瞧，一切都像以前一样。

Angular：scope。$ apply（）打破了我的应用程序？

3 个答案: