angular 不会对数组应用更改(删除套接字事件上的项目)

问题描述

首先，对不起我的英语，我是乌克兰人

First of all, sorry for my english, i'm ukrainian

socketio卡删除事件执行时，视图没有任何变化

When socketio card delete event performed, there is nothing changed in view

ng-repeat 在我看来

ng-repeat in my view

<card object="item" ng-repeat="item in LOG"></card>

在我的控制器中

$scope.LOG = [{...},...{...}];

SocketIO 发出

SocketIO emit

socket.on('card_was_deleted', function (data) {
    $scope.open_object = undefined;
    $scope.LOG = $scope.LOG.filter(function (obj) {
        return obj.ID != data.id;
    });
});//or var index = ...;$scope.LOG.splice(index, 1);

我一直在寻找 $scope.$apply() 解决方案和安全应用(而 angular raise 正在进行异常)，但没有任何效果.

I was looking for $scope.$apply() solutions and safe apply (while angular raise in progress exception), but nothing works.

请帮忙.

将此代码包装到 $apply 会引发inprog"异常，因为我已经

wrapping this code into $apply raises "inprog" exception, because i have already

MyModule.factory('socket', function ($rootScope) {
var socket = io.connect(...);
var safeApply = function(scope, fn) {
  if (scope.$$phase) {
    fn();
  } else {
    scope.$apply(fn);
  }
};
return {
    on: function (eventName, callback) {
        socket.on(eventName, function () {
            var args = arguments;
            safeApply($rootScope, function () {
                callback.apply(socket, args);
            });
        });
    },
    emit: .../*same code with eventData */
};

});

我发现在 ngRepeat 中用纯 html 替换自定义受限元素可以正常工作.我的指令

i found that replacing custom restricted element with plain html in ngRepeat works fine.My directive

    .directive('card', function ($compile, $http, $templateCache) {
        return {
            restrict: 'E',
            replace: true,
            template: '',
            scope: { object: '=',
                collapseClick: '&',
 ...
            },
            link: function (scope, element, attrs) {
                var templateLoader = $http.get("/static/admin-panel/templates/card/card-" + (scope.object.type) + ".html", {cache: $templateCache});
                templateLoader.success(function (html) {
                    element.replaceWith($compile(html)(scope));
                });

            }}
    }
);

怎么了?

推荐答案

你需要用$scope.$apply 函数，所以它看起来像:

You need to wrap any angular related code which is not executed in normal angular flow with$scope.$apply function, so it will look like:

socket.on('card_was_deleted', function (data) {
  $scope.$apply(function(){
    $scope.open_object = undefined;
    $scope.LOG = $scope.LOG.filter(function (obj) {
       return obj.ID != data.id;
    });
  });
});

它会触发内部 angular 事件循环，您可以阅读有关它的更多信息 这里.

It will trigger internal angular event loop, you can read more about it here.

这篇关于angular 不会对数组应用更改(删除套接字事件上的项目)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！