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

我正在从websocket获取数据。在这些数据中，我有LastEmplyEID，我使用它在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) {                           
                        });              
        })
    }
};
});

---

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

确保“广播”上没有其他广播内容

确保当控制器中的数据发生更改时，父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;              
                }
            })
        }
    };
});

mydirections.directive（'headshot'，函数（$http）{
返回{
限制：“AE”，
范围：{
lastID:“@lastID”
},
模板：“”，
链接：函数（范围、元素、属性）{
var src='img/nophoto.png'；
scope.imgSrc=（src）；
var last_id=-1；
属性$observe（'lastid'，函数（id）{
如果（最后一个id！==id）{
//根据员工id获取图像的名称
$http.get（'photo/photo.aspx？id='+id）.成功（函数（数据）{
src='img/'+数据；
scope.imgSrc=（src）；
}).error（函数（错误）{
src='img/nophoto.png'；
scope.imgSrc=（src）；
});
最后一个id=id；
}
})
}
};
});

---

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

有哪些浏览器支持您你试过了吗？它会影响到所有这些吗？这是你代码的一个子集，还是上面的代码在自己运行时也会显示错误？@amccormack我在范围更新上也有同样的问题，但闪烁只在Linux Google Chrome中可见。在OS X Chrome、Linux Firefox中不可见/根本不存在闪烁。我正在使用Chrome。这是要求的一部分。控制台中没有显示错误。Websocket始终在广播。广播新信息时会发生闪烁，例如，

$scope中的某些内容。组

更改后的图像将闪烁，即使

$scope.lastID

仍然不变。请您给我一个指针，指示我应该如何操作，以确保元素将不会强制headshot在控制器更改内刷新？谢谢

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

            });
        }]);

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