AngularJS根据宽度设置div的高度

Question

我希望根据一个div的宽度设置其高度，然后应用一个乘数因子。我的代码中使用了AngularJS，并且需要基于class来使用指令。

我的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类），那么我需要这个div的高度为宽度的1.08571倍。我知道我需要使用指令来实现这一点，但不确定我错在哪里。我的指令代码如下：

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

});

非常感谢您的帮助！

- user3429672

---

你的错误/问题是什么？你的指令会发生什么事情？ - Andresch Serj

抱歉，我忘记添加了。高度没有从其自然状态改变，所以我不认为指令起作用了。我想知道这是否是因为该代码是使用ng-view动态加载的原因。 - user3429672

同时，使用ng-class正确设置了类，因此这不是问题。 - user3429672

你试过我的解决方案吗？它对你有用吗？ - Timothée Jeannin

当我使用restrict: "A"并添加一个bannerbox =“”元素时，它确实起作用，但是使用类时它不起作用。这可能与ng-class有关吗？是否可以动态添加元素... - user3429672

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/

- Timothée Jeannin