html - 使用angularjs指令将绝对div与另一个div的右边缘对齐

Question

我正在尝试使用 angularjs 指令将绝对 div 的右侧与另一个 div 的右侧对齐。代码几乎可以正常工作，但子 div 比父 div 宽一点，我得到了错误的 offsetWidth 值。

jsfiddle

我的指令:

app.directive('alignElementRight', function ($document) {
return {
    restrict: 'A',
    scope: {
        alignElementRight: '@'
    },
    link: function (scope, element, attrs) {
        scope.$watch('alignElementRight', function (value) {
            console.log(value);

            var relEleme = $document.find('#' + value);
            var myEl = angular.element(document.querySelector('#' + value));
            var elOffsetLeft = myEl[0].offsetLeft;
            var elOffsetTop = myEl[0].offsetTop;
            var elOffsetWidth = myEl[0].offsetWidth;

            console.log('main width:' + elOffsetWidth);

            var absElemOffsetWidth = element[0].offsetWidth;
            console.log('menu: ' + absElemOffsetWidth);

            var newOffsetLeft = Math.abs(elOffsetLeft + elOffsetWidth - absElemOffsetWidth);
            element.css({
                left: newOffsetLeft + 'px'
            });
        });


    }
};

});

Answer 1

最简单的解决方法是为 .row 元素重置 Bootstrap 的负边距设置，因为这是造成所有困惑的原因(否则您的计算很好):

.row {
    margin: 0;
}

在这里查看:http://jsfiddle.net/9d8gq8r2/4/