如何使用angularjs指令設置height = width以根據引導網格系統獲得方形div？

我一直在玩angularjs創建我自己的應用程序和以下想法來到我的腦海：如何使用angularjs指令設置height = width以根據引導網格系統獲得方形div？

我想做一個指令，使自適應正方形divs與引導網格系統一起工作。

在繼續之前，我已經徹底搜索了過去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', 
     }); 
    }; 
});

但是，我不能讓它工作（我已經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', 
     }); 
    }; 
});

它在x屬性wh ='x'被設置時工作。

我想是做「X」（在angularjs腳本）等於由COL-VW-X引導類給出的寬度值，所以當我寫：

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

我自動獲得一個方形div，根據bootstrap類。

來源

2016-06-30 Rafael Gonzalez

這裏是一個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', 
     }); 
    }; 
});

基本上我閱讀類的屬性，並獲得COL-SM-4在我的例子中。查找最後一個' - '並獲取字符串的其餘部分（即我的示例中爲4）。然後，我使用了您的代碼並且它可以正常工作。

您可能希望在指令中添加一些錯誤檢查，因爲我使用的是indexOf和substring，但總體思路就在那裏。

讓我知道是否有幫助。

來源

2016-07-01 01:58:19 Gregori

哇，這實際上對我很好。我從來沒有想過使用「substring」和「lasIndexOf」（花了我一些時間來了解jajaja發生了什麼）。我仍然由一種幾乎沒有變化，因此將調整到bootstap的網格系統設置： '寬度'：寬度* 100/12 + 'VW'， '高度'：寬* 100/12 + 'VW'， –

很高興幫助。 indexof和substring是一個古老的技巧......如果你找不到indexof等，它往往會在Java或類似語言中發出異常。在JavaScript中，如果你不通過正確的格式。更乾淨的方式可能是一個正則表達式/正則表達式。 – Gregori

如何使用angularjs指令設置height = width以根據引導網格系統獲得方形div？

回答

相關問題