Question

我从websocket获取数据。在那个数据中我有lastEmplyeeID，用于在img文件夹中查找员工pic并通过指令显示。不幸的是，任何时候控制器范围的某些部分都会发生变化（例如，图像闪烁。

指令：

myDirectives.directive('headshot', function($http) {
return {
    restrict: 'AE',
    scope: {
        lastID: '@lastid'
    },
    template: '<img ng-src="{{imgSrc}}" class="headshot">',
    link: function(scope, element, attrs) {

        attrs.$observe('lastid', function(id) {

            scope.id = id;
            var src = 'img/nophoto.png';
            scope.imgSrc = (src);

                var url = 'photo/photo.aspx';

                //get name of the image based on employee id
                $http.get(url + '?id=' + scope.id)
                        .success(function(data) {
                            var src = 'img/' + data;
                            scope.imgSrc = (src);
                        })
                        .error(function(error) {                           
                        });              
        })
    }
};
});

查看：

 <div id="imageWrapper">
    <headshot lastid="{{lastID}}"></headshot>
</div>

控制器：

myControllers.controller('MyCtrl',
    [
        '$scope', '$rootScope', '$http', 'webSocketService', 
        function($scope, $rootScope, $http, webSocketService) {
            $http.defaults.useXDomain = true;

            var data = {};

            //get data from socket
            webSocketService.getData();
            $rootScope.$on('broadcast', function() {

                data = webSocketService.message;
                $scope.eventState = data.event.eventState;
                $scope.lastID = $scope.eventState.lastEmployeeID;

                $scope.groups = data.event.groups; //when groups change, the picture of last employee flickers

            });
        }]);

Answer 1

我无法使用提供的代码重现闪烁，但您可能需要检查或执行以下操作：

确保没有其他内容在'广播'上播出。
当控制器内的数据发生变化时，确保父DOM元素不会强制爆头刷新。

或许将您的指令重构为：

 myDirectives.directive('headshot', function($http) {
    return {
        restrict: 'AE',
        scope: {
            lastID: '@lastid'
        },
        template: '<img ng-src="{{imgSrc}}" class="headshot">',
        link: function(scope, element, attrs) {

            var src = 'img/nophoto.png';
            scope.imgSrc = (src);
            var last_id = -1;

            attrs.$observe('lastid', function(id) {
                if ( last_id !== id ) {
                    //get name of the image based on employee id
                    $http.get('photo/photo.aspx?id=' + id).success(function(data) {
                        src = 'img/' + data;
                        scope.imgSrc = (src);
                    }).error(function(error) {                           
                        src = 'img/nophoto.png';
                        scope.imgSrc = (src);                
                    });
                    last_id = id;              
                }
            })
        }
    };
});

在http服务能够加载到正确的图像之前，您的闪烁可能是由scope.imgSrc短暂重置为“img / nophoto.png”引起的。此外，您应该保持一些状态并检查以确保新的lastid实际上与前一个值不同（也将阻止无关的http调用）。这个重构应该可以防止这种情况，虽然我实际上并没有将其视为问题的原因，因为如果我理解你的问题，那么lastid实际上不应该在闪烁的情况下发生变化。如果您在员工形象更改时抱怨闪烁，那么这应该可以解决您的问题。

AngularJS指令图像在任何范围更新时闪烁

1 个答案: