У меня есть директива, которая заменяет мой пользовательский тег некоторым регулярным HTML. Есть некоторые атрибуты, которые я хотел бы удалить. Например, учитывая синтаксис
<ui mybutton width="30"></mybutton>
моя директива преобразует его в
<div width="30" class="btn">bla bla </div>
Я хочу удалить это "width=30" и добавить style="width:{{old width value here}}"
Я экспериментировал с функцией компиляции и ссылки. Должен ли я сделать это в компиляции или в функции ссылок?
Я думал, что должен был сделать это в функции компиляции, потому что хочу внести изменения в шаблон.
Смотрите в прямом эфире http://jsfiddle.net/WptGC/2/ ПРЕДУПРЕЖДЕНИЕ: ваш браузер может зависать! Смотрите его в прямом эфире и безопасно http://jsfiddle.net/WptGC/3/ код, который заставляет провалить все аварии.
.directive('mybutton', function($compile) {
return {
restrict: 'A',
//transclude: true,
template: '<div class="this is my subscreen div" style="width:{{width}}"></div>',
replace: false,
/*scope: {
width: '@',
height: '@',
x: '@',
y: '@'
},*/
compile: function($tElement, $tAttrs) {
console.log("subscreen template attrs:");
console.log($tAttrs);
var el = $tElement[0];
//el.getAttribute('width');
var stylewidth = el.getAttribute('width');
el.removeAttribute('width');
return function(scope) {
$compile(el)(scope);
}
}
}
})
Я просто получаю странный цикл (этот console.log появляется несколько тысяч раз)
Если мне не хватает какого-либо другого требования, вы должны просто использовать область выделения и шаблон, например:
app.directive('backbutton',function(){
return {
restrict: 'A',
replace:true,
scope: {
x: '@',
y: '@'
},
template:'<button style="width: {{x}}px; height: {{y}}px">A back-button template</button>',
link: function (scope, element, attrs) {
element.removeAttr('x').removeAttr('y');
}
}
});