Question

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

执行socketio卡删除事件时，视图中没有任何更改

在我看来

ng-repeat

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

在我的控制器中

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

SocketIO发射

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（）解决方案和安全应用（虽然角度提升正在进行中）但是没有任何效果。

请帮忙。

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

了

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替换自定义限制元素可以正常工作。我的指示

    .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));
                });

            }}
    }
);

出了什么问题？

Answer 1

您需要包装任何未在正常角度流中执行的角度相关代码 $scope.$apply函数，所以它看起来像：

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;
    });
  });
});

它将触发内部角度事件循环，您可以阅读更多相关信息here。

angular不对数组应用更改（删除套接字事件上的项）

1 个答案: