Question

如果div宽度调整大小，我有以下指令来调整div的高度。由于调整div宽度时未知的原因（通过改变窗口的大小）没有任何反应 - 但是如果你调整窗口大小然后鼠标悬停在div上，则高度应该调整。我做错了什么？

使用控制台我注意调整窗口不会导致$ watch执行。它仅在窗口大小更改后鼠标悬停在div上时执行。

app.directive('cardHeight', function () {
return {
    link: function (scope, element, attrs) {
        console.log("cardHeight", scope.data);

        scope.getWidth = function () {

            return element[0].offsetWidth;
        };


        scope.$watch(scope.getWidth, function (newWidth, oldWidth) {
            console.log("newold", newWidth, oldWidth);
            if (newWidth != oldWidth) {
                var divHeight = "height: " + newWidth / scope.data.aspectRatio + "px";
                attrs.$set("style", divHeight);

            }
        });





    },
    scope: {
        data: "=datad"
    }
}

}）;

Answer 1

$watch(watchExpression, [listener], [objectEquality]);

每当watchExpression发生更改时，都会注册一个侦听器回调函数。

每次调用$ digest（）时，watchExpression都会被称为   返回将要观看的值。（因为$ digest（）重新运行   检测watchExpression可以多次执行的更改   $ digest（）并且应该是幂等的。）

但是，只有在范围发生变化或调用方法时才会调用$ digest（如果鼠标超出了元素，也会发生这种情况）。

我宁愿使用.onresize事件，如下所示：

link: function (scope, element, attrs) { element[0].onresize=function() { scope.width=element[0].clientWidth; scope.$apply(); }; scope.$watch('width', function (newWidth, oldWidth) { console.log("newold", newWidth, oldWidth); if (newWidth != oldWidth) { var divHeight = "height: " + newWidth / scope.data.aspectRatio + "px"; attrs.$set("style", divHeight); } }); },

在鼠标悬停之前，在指令中观察表达式不适用

1 个答案: