Блог

Главная - Вопросы по программированию - Угловой встроенный CSS

Угловой встроенный CSS

#angularjs #directive

#angularjs #директива

Вопрос:

Как я могу создать директиву, которая дает мне доступ к объекту $ scope в теге встроенного стиля?

Что мне нужно, так это что-то вроде этого:

 <style>
    p { 
        font-size: {{userSetting.fontSize}} 
        margin: {{userSetting.margin}}
    }
</style>

Я начал работать над директивой для него, но не могу понять, как ее создать.

Комментарии:

1. похоже, вы смотрите в неправильном направлении, вы можете манипулировать DOM, но не классами css, вам следует разбавить с точки зрения добавления и удаления классов к элементу в DOM

2. Встроенные стили являются пользовательскими и зависят от пользователя, поэтому это может быть margin: 10px или margin: 55px — это зависит от пользователя. Вот почему мне нужно, чтобы они были встроенными, а не в классах.

Ответ №1:

Итак… Хотя я не думаю, что это хорошая идея делать это. Вы могли бы выполнить это с помощью директивы:

 <ng-style-definition>
  h1 {
    color: {{h1.color}};
  }
</ng-style-definition>```

app.directive('ngStyleDefinition', function($timeout){
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    template: '<style ng-transclude></style>',
    link: function(scope, element, attr){
      $timeout(function(){
        element.html(element.children().text())
      }, 0)
    }
  }
})

Вы могли бы стать немного чище, внедрив сервисы $ parse или $ interpolate, но суть в этом.

Пару примеров можно увидеть здесь:http://plnkr.co/edit/eqmFho55YckE5wmYHdJB?p=preview

Комментарии:

1. Спасибо — я отмечу это как правильный ответ, поскольку он ведет меня по правильному пути. Хотя почему это не очень хорошая идея? Логика, стоящая за этим, заключается в том, что пользователь может создавать стиль своей собственной страницы, и я использую встроенные стили для достижения этой цели. Я подумал, что это было бы быстрее, чем стилизовать сами элементы, например, с помощью ngStyle

2. Я думаю, это действительно зависит от контекста вашего приложения.