#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. Я думаю, это действительно зависит от контекста вашего приложения.