javascript - 在子元素的指令中获取 CSS 属性

Question

我目前正在循环遍历指令附加到的元素的子元素，并为 mouseup 和 mousedown 添加回调:

    var dragDroppables = element[0].children;

    for (var elementIdx = 0; elementIdx < dragDroppables.length; elementIdx++) {
        var bindElement = dragDroppables[elementIdx];

        var elementID = bindElement.attributes['id'].value;

        if(elementID == "DragDroppable") {

            var bindElementAngular = angular.element(bindElement);

            bindElementAngular.on('mousedown', function() {
                bindElementAngular.css('background-color', 'rgb(17, 83, 252)');            
                elementHeldDown = bindElementAngular;
                isElementHeldDown = true;

                //window and angular.window are both undefined in this case
                var style = angular.window.getComputedStyle(bindElementAngular);         
                heldDownElementWidth = parseInt(style.getPropertyValue('width'));
                heldDownElementHeight = parseInt(style.getPropertyValue('height'));     
            });
            bindElementAngular.on('mouseup', function () {
                bindElementAngular.css('background-color', 'rgb(73, 122, 255)');
                isElementHeldDown = false;
            });
          }
       }
    }

现在它提示窗口对象未定义。当我在 Controller 中具有此功能时，直接获取窗口对象(无需从 Angular 对象调用它)工作正常。现在它在指令中似乎不再起作用了。如何从指令内的任意 DOM 对象获取 CSS 属性？

Answer 1

尝试在指令中注入(inject)window对象

directives.insertStyle = [ "$window", function($window){
    return {
        link: function(scope, element, attrs) {
            var elementStyleMap = $window.getComputedStyle(element[0], null);

        }
    }   
}];