javascript - 从指令获取元素样式 - 随机失败

Question

在一个 Angular Directive(指令)中，我想要一些样式(例如:backgroundImage)来存储它以备将来使用。我有以下代码:

angular.module('myApp')
    .directive('myDirective', function() {
        return {
            restrict: 'A',
            terminal: true,
            link: function(scope, element, attrs) {                                 
                // examples of how get it
                console.log(element.css('background-image'));
                console.log(window.getComputedStyle(element[0]).backgroundImage);
            }
         };
     });

大多数时候我都能成功获得 backgroundImage 值，但有时我只能获得 null 值。然后我刷新页面并再次成功获取值。我怎样才能从指令中获取样式属性而不会出现这个问题？

任何提示或建议表示赞赏。谢谢

Answer 1

您可以通过等待 $viewContentLoaded 事件确保在加载所有内容后读取 css:

angular.module('myApp')
    .directive('myDirective', function() {
        return {
            restrict: 'A',
            terminal: true,
            link: function(scope, element, attrs) {                                 
                scope.$on('$viewContentLoaded', function() {
                    console.log(element.css('background-image'));
                    console.log(window.getComputedStyle(element[0]).backgroundImage);
                });
            }
         };
     });