Блог

Я хочу создать директиву A -restrict bg-image (для button тегов), которая заменяет себя другими A директивами-restrict.

Итак,

 <button other-attr="other-value" bg-image="'image'">Text</button>
  

должно стать

 <button other-attr="other-value" ng-style="{'background-image': 'url('image.png');'}">Text</button>
  

Как я могу это сделать? Спасибо.

Обновление: я хочу применить директиву, но не что-то вроде elem.css .

Вы можете использовать elem.css() и attr параметры функции link, чтобы получить то, что вы достигаете, нет необходимости использовать ngStyle директивную базу для css свойств, которые вы хотите включить.

например

 .directive('bgImage', function() {
  return function(scope, elem, attr) {
    elem.css('background-image', 'url('   attr.bgImage   ')');
  };
});
  

Обновить:

Учитывая приведенный выше пример, вы также можете использовать ngStyle и иметь службу $compile для перекомпиляции элемента вместе с ngStyle директивой:

например

 .directive('bgImage', function($compile) {
  return function(scope, elem, attr) {
    elem.attr('ng-style', "{'background-image': url("   attr.bgImage   ")}");
    elem.removeAttr('bg-image');
    $compile(elem)(scope);
  };
});
  

удаление bgImage директивы перед компиляцией предотвращает бесконечный процесс компиляции.

Новое обновление:

HTML

 <button bg-image="my-default-image.png" bg-image-hover="my-hover-image.png"></button>
  

JAVASCRIPT

 .directive('bgImage', function() {
  return function(scope, elem, attr) {
   elem.css('background-image', 'url('   attr.bgImage   ')');

   elem.on('mouseover', function() {
     elem.css('background-image', 'url('   attr.bgImageHover   ')');
   });

   elem.on('mouseout', function() {
     elem.css('background-image', 'url('   attr.bgImage   ')');  
   });

   scope.$on('$destroy', function() {
     elem.unbind('mouseover');
     elem.unbind('mouseout');
   });
  };
});
  

Как вы заметили, вы можете сделать это без добавления новых директив в сам элемент, вы все равно можете добиться добавления поведения СУХИМ способом.

Примечание: если вы создаете события в директиве, обязательно очистите ее, когда область действия директивы будет уничтожена путем ее отмены в $destroy событии