AngularJS: Применить другую директиву в моей директиве

Question

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

Так,

<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.

Answer 1

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

например.

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

UPDATE:

Учитывая пример выше, вы можете также использовать ngStyle и иметь службу $ компиляции перекомпилировать элемент вместе с 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 случае