Question

我编写了一个指令，允许您将CSS属性绑定到另一个

的高度

m.directive('bindToHeight', function ($window) {

    return {
        restrict: 'A',

        link: function (scope, elem, attrs) {
            var attributes = scope.$eval(attrs['bindToHeight']);
            var targetElem = angular.element(document.querySelector(attributes[1]));

            // Watch for changes
            scope.$watch(
                function () {
                    return targetElem.height();
                },
                function (newValue, oldValue) {
                    if (newValue != oldValue) {
                        elem.css(attributes[0], newValue);
                    }
                });
        }
    };
});

用法：

<div bind-to-height="['bottom','#theContainer']">

现在我注意到它只在#theContainer的内容更新两次后才有效。它第一次发送高度为0，第二次正确地获得高度。

此div从另一个角度控制器更新，高度可以根据其中的内容而改变。我写这个的原因是因为某些东西堆积在其上方（位置绝对）并需要调整其高度以匹配。

当我第一次运行页面时，我得到以下值

OldValue：287，NewValue：287
OldValue：287，NewValue：0

我是否写错了指令，或者有更好的方法吗？

Answer 1

尝试深入观察您的元素：

m.directive('bindToHeight', function ($window) {

    return {
        restrict: 'A',

        link: function (scope, elem, attrs) {
            var attributes = scope.$eval(attrs['bindToHeight']);
            var targetElem = angular.element(document.querySelector(attributes[1]));

            // Watch for changes
            scope.$watch(
                function () {
                    return targetElem.height();
                },
                function (newValue, oldValue) {
                    if (newValue != oldValue) {
                        elem.css(attributes[0], newValue);
                    }
                }, true);//ADD A BOOLEAN TO DEEPWATCH ALL THE PROPERTIES OF THE OBJECT
        }
    };
});

用于观察高度变化的AngularJS指令

1 个答案: