Застрял при создании пользовательской директивы стиля css

Для единственного визуального редактора я пытаюсь создать новую директиву, которая пишет стиль CSS. Я застрял в попытке получить директиву для обновления при нажатии флажка, чтобы сделать свойство background-color прозрачным.

Вот моя (нерабочая) директива:

myApp.directive('customstyle', function () {
return {
    restrict: 'E',
    link: function (scope, element, attrs) {
      var bgColor;
      scope.$watch(attrs.myTransparent, function (value) {
        if (value) {
          bgColor = 'transparent';
        } else {
          bgColor = attrs.myBgcolor;
        }
        updateStyle();
      }, true);

      function updateStyle() {
        var htmlText = '<style>.' + attrs.myClass + '{';
        htmlText += 'background-color: ' + bgColor + ';';
        htmlText += "}</style>";
        element.replaceWith(htmlText);
      }
      updateStyle();
  }
}
});

и HTML-элемент:

<customstyle my-class="examplediv" my-transparent="settings.Window.Transparent" my-bgcolor="settings.Window.BackgroundColor"></customstyle>

Вот jsfiddle ситуации: http://jsfiddle.net/psinke/jYQc6/

Любая помощь будет принята с благодарностью.


angularjs
person Peter Sinke    schedule 14.01.2013    source источник

Ответы (2)


arrow_upward
17
arrow_downward

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

HTML:

<div class="examplediv customstyle" 
     my-transparent="settings.Window.Transparent" 
     my-bgcolor="{{settings.Window.BackgroundColor}}">
</div>

Примечание. Используйте {{settings.Window.BackgroundColor}} для передачи значения свойства, а не строки.

Директива:

myApp.directive('customstyle', function () {
    return {
        restrict: 'AC',
        link: function (scope, element, attrs) {          
           scope.$watch(attrs.myTransparent, function (value) {     
             element.css('background-color', (value ? 'transparent' : attrs.myBgcolor));            
           });                      
        }
    }
});

Примечание. Используйте element.css() для изменения свойств CSS непосредственно в элементе.

jsFiddler: http://jsfiddle.net/jYQc6/8/

person bmleite    schedule 14.01.2013
comment
Спасибо за Ваш ответ. На странице, на которой я буду использовать этот стиль, стиль будет применяться к неизвестному количеству элементов в списке, поэтому установка свойств css для каждого элемента не кажется правильным путем. Мне удалось заставить его работать. Оказалось, что мне пришлось преобразовать значение флажка в логическое значение, чтобы заставить его работать. И я не заменил элемент, а изменил html внутри него. Я до сих пор не уверен, что это лучший способ сделать это. Полагаю, мне еще есть чему поучиться. Вот рабочий jsfiddle: jsfiddle.net/psinke/YJxR9 - person Peter Sinke; 14.01.2013
comment
@Peter, $observe всегда будет возвращать строку, поэтому вместо if (parseBool(myBool)) { вы можете просто сделать это: if(myBool == "true") {. (Модель ng будет использовать только значения true и false для флажка, поэтому нет необходимости искать другие возможные логические значения.) - person Mark Rajcok; 15.01.2013

arrow_upward
1
arrow_downward

У меня была такая же проблема, и использование решения bmleite решило ее. У меня был настраиваемый элемент с настраиваемым атрибутом, очень похожим на приведенный выше, и изменение директивы для применения к обычному DIV вместо настраиваемого атрибута исправило это для меня.


В моем решении у меня также есть следующая строка кода сразу после изменения элемента:

  $compile(element.contents())(scope);


Не забудьте внедрить сервис $compile в объявление функции-директивы:

  myApp.directive('directiveName', function ($compile) { ...


Спасибо за отличный пост!

person Ivan    schedule 08.05.2013