Question

我试图根据宽度设置div的高度，然后应用乘法因子。我在我的代码中使用angularjs，我需要使用该类来指令。

我的HTML如下：

<div ng-class="(box.banner) ? 'bannerbox col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4' : 'cardbox col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4'"  ng-repeat="box in boxes">

如果div是bannerbox（即具有bannerbox类），那么我需要这个div的高度为1.08571 *宽度。我明白我需要使用指令来做这件事，但不知道我哪里出错了。我的指令代码如下：

app.directive('bannerbox', function () {
return {
    restrict: "C",
    link: function (scope, element) {
        element.height(element.width * 1.08571);
    }
}

}）;

非常感谢任何帮助！

Answer 1

您需要注意元素的宽度，因为宽度值最初为零。

调用链接函数时，元素的宽度为零。

假设您正在使用angularJs和jQuery：

app.directive('bannerbox', function () {
    return {
        restrict: "A",
        link: function (scope, element) {
            scope.getWidth = function () {
                return $(element).width();
            };
            scope.$watch(scope.getWidth, function (width) {
                // Do your work with the element width.
                // Be careful not to change the width of the element or you will create an infinite loop.
                // Set the height of the element.
            });
        }
   }
});

在这里运用JsFiddle示例：http://jsfiddle.net/ZtQ2p/

angularjs根据宽度设置div的高度

1 个答案: