如何使用angularjs指令设置height=width，以根据引导网格系统获得正方形div？

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

我想做一个指令，使响应方div与引导网格系统一起工作

在继续之前，我已经彻底搜索了过去4个小时，虽然我找到了有趣的方法，但没有一个能给我一个解决方案

所以我想出了以下代码：

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两天了）。如果我这样做：

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引导类给出的宽度值，因此当我编写时：

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

根据引导类，我自动得到一个正方形div。

这里是一个

在我的HTML中，我有：

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

基本上，我阅读了类属性并在我的示例中得到了col-sm-4。查找最后一个“-”并获取字符串的其余部分（在我的示例中为4）。然后我使用了您的代码，它就可以工作了

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

---

如果有帮助，请告诉我。

哇，这对我来说真的很有效。我从来没有想过使用“子串”和“lasIndexOf”（我花了一些时间去理解jajaja发生了什么）。尽管如此，我还是做了一点小改动，这样它就可以适应bootstap的网格系统设置：“宽度”：宽度*100/12+“vw”，“高度”：宽度*100/12+“vw”，很高兴这有帮助。索引和子字符串是一个老把戏。。。如果在Java或类似语言中找不到indexof等，它往往会出现异常。在JavaScript中，如果不传递正确的格式，它可能不会使应用程序崩溃。更简洁的方法可能是正则表达式/正则表达式。

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',
        });
    };
});