Как эффективно установить свойства CSS для всех браузеров (-webkit, -moz, -o, -ms) с помощью angular?

0

Мне нужно установить свойство CSS с помощью угловой функции. Вот мой код:

<div ng-style="{ 'transform': getRotation(i) }"></div>

Однако я хотел бы добавить совместимость браузера, используя следующие свойства:

  • -webkit-преобразования
  • -moz-преобразования
  • -ms-преобразования
  • -о-преобразование

Я попробовал что-то вроде:

 ng-style="{ 'transform': getRotation(i),
             '-webkit-transform': getRotation(i),
             '-moz-transform': getRotation(i),
             '-ms-transform': getRotation(i),
             '-o-transform': getRotation(i) }"

Но getRotation() вызывается пять раз, даже если требуется только одно свойство.

Знаете ли вы, что правильно и эффективно управлять совместимостью CSS с угловым?

EDIT: рабочий плункер здесь, если необходимо

Теги:

4 ответа

1

используйте ng-class вместо функции преобразования ng-стиля в css.

Поделиться
  • 0
    Спасибо за ваш ответ, но как получить динамические свойства с помощью ng-класса? Потому что мое «преобразование» не является фиксированным числом.
1

Вам нужно будет написать директиву, чтобы уменьшить количество раз, когда вызывается функция getRotation().

Директива должна генерировать атрибут стиля, наблюдая getRotation и обновляя атрибут стиля только один раз, а не 5 раз.

Пожалуйста, поделитесь своим кодом в плункере или что-то в этом роде, поэтому я могу обновить его с помощью директивы.

Изменение: ниже плункер содержит директиву, указанную выше.

https://plnkr.co/edit/iodBM1zbmrRGuNT8J0R9?p=preview

.directive('prefixTransform', function($log) {
    return {
      restrict: 'A',
      scope: {
        prefixTransform: '='
      },
      link: function(scope, element) {
        scope.$watch('prefixTransform', function(o, n) {
          element
            .css('transform', n)
            .css('-webkit-transform', n)
            .css('-moz-transform', n)
            .css('-ms-transform', n)
            .css('-o-transform', n);
        });
      }
    };
  })
Поделиться
  • 0
    Спасибо за Ваш ответ. Вот плункер plnkr.co/edit/qnbtbdvTfqCF8imEfma6?p=preview
  • 0
    @ Алекс, спасибо за вантуз, пожалуйста, проверьте мой обновленный ответ.
1

Если вы используете инструмент предварительной компиляции, например gulp или grunt, вы можете создать класс с свойством transform и использовать автопрефикс, который будет генерировать все префиксные свойства. Затем вам просто нужно использовать ng-class вместо ng-style.

Поделиться
0

Я использовал бы ng-класс вместо ng-style. Он намного чище, чем встроенный стиль, и позволяет использовать препроцессор CSS как LESS или SASS для определения всех префиксов стиля кросс-браузера через функции mixin.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню