Question

我的AJAX响应里面是删除的对象：

query

我有带代码的HTML代码，它将按条件显示：

request.success(function (data) {
    delete $scope.notifications.system[key];
    $scope.$apply();
});

因此，我在删除对象后立即尝试使用<span ng-show="notifications.system.length == 0" ng-cloak> DELETED </span>作为响应。但我有错误：

$scope.$apply();

Error: [$rootScope:inprog] http://errors.angularjs.org/1.3.13/$rootScope/inprog?p0=%24digest等于零时如何重新加载模板？

Answer 1

在数组上使用delete时，它不会更改数组的长度，而是使用undefined替换数组中的元素。所以你的ng-show永远不会改变，因为数组的长度没有变化。改为使用splice，数组会缩短，你的$ scope应该按预期更新。

$scope.notifications.system.splice($scope.notifications.system.indexOf(key), 1);

你不应该需要$ scope。$ apply（）来做这样的事情。

Answer 2

如果您选择使用$ scope。$ apply（），您应该将所有内容包装在$ timeout中并像这样调用它。

request.success(function(resp){
    $timeout(function(){
        $scope.$apply(function(){
            //do stuff here to the scope.
        });
    });
});

将函数引用传递给$apply将导致它执行该函数，然后$digest。我知道这似乎有点奇怪，但原因是AngularJS通常会调用$digest来响应用户交互，而不一定是$http.success之类的事件。

Answer 3

您还可以以不同方式管理错误。您可以将错误对象添加到数组中，而不是直接添加到对象。然后可以使用以下代码进行删除：

$scope.removeError = function (errorName) {
    angular.forEach($scope.notifications, function (error, index) {
        if (error.hasOwnProperty(errorName)) $scope.notifications.pop(index);
    });
};

请查看下面的演示，并点击此处jsfiddle。

＆＃13;

angular.module('myApp', [])
    .controller('mainController', MainController);

function MainController($http, $scope, $timeout) {

    $scope.notifications = [{
        errorImg: 'failed to load image',
    }//, 
    /*{ // other errors
        //errorJS: 'failed to load js'
    }*/];

    $scope.removeError = function (errorName) {
        angular.forEach($scope.notifications, function (error, index) {
            //console.log(index, error.hasOwnProperty(errorName), $scope.notifications);
            if (error.hasOwnProperty(errorName)) $scope.notifications.pop(index);
            //console.log(index, error.hasOwnProperty(errorName), $scope.notifications);
        });
    };
    $scope.clear = function () {
        $http.jsonp('http://www.mocky.io/v2/556f7ba53db19a8f05f1e555?callback=JSON_CALLBACK')
            .success(function (response) {
            //dummy request
            //console.log(response, $scope.notifications);

            //delete $scope.notifications['errorImg'];
            $scope.removeError('errorImg');
        }) //.bind(this))
    }
}

MainController.$inject = ['$http', '$scope', '$timeout'];

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller='mainController as main'> <pre>{{notifications |json}}</pre>

    <!--<button ng-click="main.show()">Show data</button>
    <ul>
        <li ng-repeat="info in main.data">{{info.test}}</li>
    </ul>-->
    <button ng-click="clear()">clear error</button>
    <ul>
        <li ng-repeat="i in dummy">{{i}}</li>
    </ul>
    <div ng-show="notifications.length == 0">deleted</div>
</div>

＆＃13;

如何在AJAX响应中反映Angular中的$ scope？

3 个答案: