如何根据 bootstrap 网格系统使用 angularjs 指令设置高度 = 宽度以获得正方形 div？

Question

我一直在玩 angularjs 来创建我自己的应用程序，我想到了以下想法：

我想制定一个指令来制作可与 bootstrap 网格系统一起使用的响应式正方形 div。

在继续之前，我已经彻底搜索了过去 4 个小时，虽然我发现了一些有趣的方法，但其中 none 给了我一个解决方案。

所以我想出了以下代码：

var app = angular.module('ClientsApp', []);

app.directive('wh', function(){
    return function(scope, element, attrs){
        var x = element.css[width];
        element.css({
            'width': x,
            'height': x,
            'border-radius':'1rem',
        });
    };
});

但是，我无法让它工作（我已经使用 angular 2 天了）。 Intead 如果我这样做：

var app = angular.module('ClientsApp', []);

app.directive('wh', function(){
    return function(scope, element, attrs){
        var x = element.css[width];
        element.css({
            'width': **x + 'em'**,
            'height': **x + 'em'**,
            'border-radius':'1rem',
        });
    };
});

设置wh='x'属性中的x时有效

我想要的是使 'x'（在 angularjs 脚本中）等于 col-vw-x bootstrap class 给出的宽度值，所以当我写：

<div href="#" class="col-sm-**x**" wh></div>

我自动得到一个正方形div，根据bootstrapclass.

Answer 1

这是一个working plunker based on your code.

在我的 HTML 我有：

  <div href="#" class="col-sm-4" wh style='background-color: blue;'></div>

我的指令如下所示：

app.directive('wh', function(){
    return function(scope, element, attrs){
      var width = attrs.class.substring(1+attrs.class.lastIndexOf('-'));
      console.log('Directive width: '+width);

        var x = element.css[width];
        element.css({
            'width': width + 'em',
            'height': width + 'em',
            'border-radius':'1rem',
        });
    };
});

基本上我阅读了 class 属性并在我的示例中获取了 col-sm-4。查找最后一个“-”并获取字符串的其余部分（即我的示例中的 4。）然后我使用了您的代码并且它有效。

你可能想在指令中添加一些错误检查，因为我正在使用 indexOf 和 substring，但总体思路是这样的。

如果有帮助请告诉我。

如何根据 bootstrap 网格系统使用 angularjs 指令设置高度 = 宽度以获得正方形 div？

How to set height = width with angularjs directives to get a square div according to bootstrap grid system?

css

twitter-bootstrap

angularjs

angularjs-directive

responsive