Почему transclude не работает с input?

Question

[Александр Евгеньевич]

Здравствуйте.
Есть input:

<input type="text" name="name" value="0" rt-number/>

Есть директива:

angular.module('Wasya').directive('rtNumber', function(){
return {
restrict : 'A',
link : function($scope, el, attr){/*тут всякий код*/},
template: '<div class="wrap" ng-transclude></div>', // и если <ng-transclude></ng-transclude> тоже не работает
transclude : true,
scope : {}
};
});

Не работает с input , работает с div , span, sub . С другими не проверял.
Прошу помощи, а то уже адски бесит.
Да, и результатом работы с input-ом получается template обернутый input-ом .

Результат, который нужно получить:

<div class="wrap" ng-transclude>
    <input type="text" name="name" value="0" rt-number/>
</div>

Answer 1

[Vladimir]

А какого результата вы ожидаете? И что у вас получается когда div элемент?
transclude служит для подстановки содержимого элемента на который вешается деректива в ng-transclude.
И когда вешаете на импут, импут остается и в него вставляется template. Хотя это странно, зачем в тег импут вообще что-то помешать, это не правильно совсем уж.

Comments

[Александр Евгеньевич]

Мне нужно чтобы инпут был в шаблоне, но как раз-таки , получается все наоборот, что шаблон помещается в инпут.

[Vladimir]

Если нужна директива обертка, то ее и надо указывать поверх импута

Если нужно обернуть и изменить импут. То тогда надо использовать replace и там уже в шаблоне подставлять импут обернутый в див. А все необходимые изменения для импута передовать через атрибуты.
Если нужно просто обернуть, то можно и так думаю
app.directive('rtNumber', function () {
return {
restrict: 'A',
replace: false,
link: function (scope, element, attrs, ctrl, transclude) {
var wrapper = angular.element('')
element.wrap(wrapper);
}
};
});

[Vladimir]

#FIX
app.directive('rtNumber', function () {return {
restrict: 'A',
replace: false,
link: function (scope, element, attrs, ctrl, transclude) {
var wrapper = angular.element('div');
element.wrap(wrapper);
}
};
});

[Александр Евгеньевич]

Vladimir: так, а зачем тогда transclude ? Он жеж, как я понял, для этого и предназначен, чтобы размещать el в шаблоне, в указанном ng-transclude месте

[Vladimir]

Александр Евгеньевич: внимательней почитай документацию.)
ng-transclude предназначен что бы располагать в него содержимое элемента на котором навешана директива, а не сам элемент с дерективой! Например что бы вкладывать директиву в директиву. Такого поведения по умолчанию нету в ангуляре. И если надо обернуть, используется описаный мною способ, а transclude не нужен в вашем случае.

[Александр Евгеньевич]

Vladimir: Да, теперь разобрался, спасибо за помощь ! Ангуляр туго идет, соображалка не работает )

Answer 2

[kostik]

angular.module('app').directive('rtNumber', [
  function() {
    return {
      restrict: 'A',
      link: function($scope, $el) {
        var wrapper = document.createElement('div');
        wrapper.className = 'wrap';
        
        var el = $el[0];
        el.parentNode.insertBefore(wrapper, el);
        wrapper.appendChild(el);
      }
    };
  }
]);

Comments

[Александр Евгеньевич]

Спасибо за ответ, вот меня интересует, почему, когда делаю, как написано в документации, через transclude , работать не хочет, зараза.

[kostik]

https://docs.angularjs.org/api/ng/service/$compile...

"specify what the template should replace. Defaults to false.
false - the template will replace the contents of the directive's element.
"
На русском:
параметр "replace" указывает что будет заменено тем, что указано в "template" параметре. Значением по умолчанию для параметра "replace" является false.
Если значение параметра "replace" равно false, то значение параметра "template" заменит СОДЕРЖИМОЕ оригинального элемента.

[kostik]

Т.е. "transclude" здесь ни причём и никак не влияет. Параметр "transclude" и ngTransclude нужны для того, чтобы вставить дочерние элементы оригинального элемента внутрь нового элемента

[Александр Евгеньевич]

kostik: но у меня с div работает, понимаете. Div которому применена лиректива помещается внутрь указанных тегов ng-transclude в шаблоне. Я бы не беспокоился, если бы с div не работало, или другим элементом, а тут с input косяк. Да и с другими элементами работает и без replace, можете сами проверить.

[Александр Евгеньевич]

kostik: да и в офф документации для этого и используется - https://docs.angularjs.org/api/ng/directive/ngTran...

[kostik]

Александр Евгеньевич:
1) если значение для параметра "replace" равно false, то содержимое параметра "template" вставляется ВНУТРЬ оригинального елемента
2) transclude используется для того, чтобы вставить ДОЧЕРНИЕ элементы оригинального элемента в какое-то место внутри содержимого параметра "template"

https://jsfiddle.net/urargwj2/1/

в консоли:
pastebin.com/sGCWeMMu

[Александр Евгеньевич]

kostik: Все, разобрался ) Спасибо большое за помощь и потраченные нервы! Был не прав.

Answer 3

[Mikhail Osher]

Посмотрите, что Вы хотите сделать.....

<!-- before directive -->
<input type="text" name="name" value="0" rt-number />

<!-- after directive -->
<input type="text" name="name" value="0" rt-number>
   <div class="wrap" ng-transclude></div>
</input>

Опишите детально, какой результат хотите получить - попробую помочь.

Answer 4

[lega]

Внутрь input "нельзя" поместить элементы, тут вам нужно подменить input шаблоном, на Angular Light можно сделать так.

Comments

[Александр Евгеньевич]

Дык я знаю, может где сформулировал не так, мне нужно чтобы внутрь ШАБЛОНА был помещен INPUT, а не наоборот.