Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

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

In lại Tác giả: Walker 123 更新时间：2023-11-28 12:07:26 hai mươi bốn 4
mua khóa gpt4 Nike

我一直在尝试使用 angularjs 来创建我自己的应用程序，然后我想到了以下想法:

我想制定一个指令来制作可与 Bootstrap 网格系统一起使用的响应式方形 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 两天了)。 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 in 属性 wh='x' 设置时有效。

我想要的是使“x”(在 angularjs 脚本中)等于 col-vw-x Bootstrap 类给出的宽度值，所以当我写:


根据 Bootstrap 类，我自动得到一个方形 div。

câu trả lời hay nhất

đây là mộtworking plunker based on your code.

在我的 HTML 中我有:

我的指令是这样的:

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，但总体思路就在那里。

如果有帮助，请告诉我。

关于angularjs - 如何根据 bootstrap 网格系统使用 angularjs 指令设置 height = width 以获得方形 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38133494/

hai mươi bốn 4 0
Đề xuất bài viết: JavaScript 日期(年)
Đề xuất bài viết: css - iPhone 上的 JavaFX - 应用阴影时 Laggy ListView 滚动
Đề xuất bài viết: swift - 从字符串中删除停用词而不修剪 Swift 中的其他词
Đề xuất bài viết: css - 如何对齐数据表列中的文本/控件？
Walker 123
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress