Как установить высоту = ширину с директивами angularjs, чтобы получить квадратный 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 уже 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 в соответствии с классом начальной загрузки.


css angularjs twitter-bootstrap responsive angularjs-directive
person Rafael Gonzalez    schedule 30.06.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вот рабочий плункер, основанный на вашем коде.

В моем 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 и подстроку, но общая идея здесь.

Дайте мне знать, если это поможет.

person Gregori    schedule 01.07.2016
comment
Ничего себе, это действительно сработало очень хорошо для меня. Я никогда не думал об использовании подстроки и lasIndexOf (мне потребовалось некоторое время, чтобы понять, что происходит jajaja). Тем не менее, я сделал одно небольшое изменение, чтобы оно соответствовало настройке системы сетки начальной загрузки: «ширина»: ширина * 100/12 + «vw», «высота»: ширина * 100/12 + «vw», - person Rafael Gonzalez; 12.07.2016
comment
Рад, что это помогло. indexof и substring — это старый трюк... Он имеет тенденцию давать исключение в Java или подобных языках, если вы не можете найти indexof и т. д. В JavaScript это, вероятно, не приведет к сбою вашего приложения, если вы не передадите правильный формат. Более чистый способ - это, вероятно, регулярное выражение/регулярное выражение. - person Gregori; 12.07.2016