У меня есть директива, которая выглядит примерно так:
.directive('textInput', function() {
return {
restrict: 'E',
replace: true,
transclude: false,
compile: function(element, attrs) {
var html =
'<div class="form-group">' +
'<label>{{ \'' + attrs.label + '\' | translate }}</label>' +
'<input type="text" class="form-control input-sm" placeholder="' + attrs.placeholder +
'" ng-model="' + attrs.ngModel + '"' + attrs.directives + '>' +
'</div>';
var newElem = $(html);
element.replaceWith(newElem);
return function (scope, element, attrs, controller) { };
}
};
})
Обратите внимание, что атрибут directives
представляет собой строку, которая добавляет дополнительную информацию об атрибутах (например, информацию о подсказке)
Я преобразовал его в 1,5 component
но я не могу сделать то же самое с определением directives
.
.component('textInput', {
bindings: {
label: '@',
placeholder: '@',
directives: '<',
ngModel: '='
},
require: {
ngModelCtrl: 'ngModel'
},
template:
'<div class="form-group">' +
'<label ng-if="$ctrl.label">{{$ctrl.label | translate }}</label>' +
'<input' +
' type="text"' +
' class="form-control input-sm"' +
' placeholder="{{$ctrl.placeholder}}"' +
' ng-model="$ctrl.ngModel"' +
' {{$ctrl.directives}}>' +
'</div>'
})
<text-input directives="tooltip='foobar'"></text-input>
Как передать строку в элемент <text-input/>
таким образом, чтобы базовый шаблон получал правильную информацию?
Это невозможно, согласно документам:
Когда не использовать Компоненты:
для директив, которые полагаются на манипуляции с DOM, добавление прослушивателей событий и т.д., поскольку функции компиляции и ссылок недоступны, когда вам нужны расширенные параметры определения директивы, такие как приоритет, терминал, многоэлемент, когда вы хотите, чтобы директива, вызванная атрибутом или классом CSS, а не элемент
и на той же странице говорится, что компоненты не имеют функции compile
.