databinding настраиваемая директива угловая с заменой html в функции компиляции

Я пытаюсь написать директиву, которая заменяет поле ввода настраиваемым полем ввода. Однако я не могу заставить привязку данных работать, поскольку модель не отображается в поле ввода директивы.databinding настраиваемая директива угловая с заменой html в функции компиляции

Я создал jsFiddle здесь:

http://jsfiddle.net/6HcGS/392/

Я предполагаю, что я действительно не знаю, что место здесь для привязки данных к работе:

tElement.replaceWith('<input ng-model="ngModel" type="text" />');

Если кто-то может помочь мне, что я был бы очень благодарен, поскольку это было проблемой для меня целый день.

Cheers!

источник

2013-10-25 Wouter Willems

tElement.replaceWith('<input ng-model="ngModel" type="text" />');

Angularjs не знает, что ngModel является обязательным. Он интерпретируется как простая строка. Поэтому вам нужно сказать это угловатым. Я обновил свой jsfiddle, чтобы показать вам, как это сделать: http://jsfiddle.net/6HcGS/393/

Но вы можете сделать это даже проще, удаляя изолированную сферу в директиве: http://jsfiddle.net/6HcGS/394/.

Как уже упоминалось, атрибуты передаются элементу во время замены. Конечно, только если вы не используете изолированную область.

источник

2013-10-25 21:39:01 bekite

Thnx много для этой первой скрипки! Выглядит именно то, что мне нужно. Один вопрос, однако, может быть проблемой, что мы переместили создание шаблона в функцию связывания? Есть ли последствия? –

Возможны проблемы с производительностью. Функция привязки вызывается для каждой директивы zippy. Функция компиляции вызывается только один раз. Если вы просто хотите изменить dom, сделайте это в функции компиляции. Но если вам нужны какие-то зависящие от поведения изменения, сделайте это в функции связывания. Проще говоря: если вам нужно получить доступ к области, вам нужно сделать это в функции связывания. – bekite

Теперь я хочу получить доступ к контроллеру ngModel (чтобы позже использовать setValidity для проверки пользовательского поля ввода). Однако, когда я хочу использовать директиву как атрибут (не класс), функция replaceWith выдает ошибку, которая не может найти ngModel-контроллер. Я создал скрипку здесь: http://jsfiddle.net/6HcGS/396/ –

Я не понимаю, что вы пытаетесь сделать, но это, кажется, что следующий пример кода все, что вам нужно:

angular.module('zippyModule', []) 
.directive('zippy', function(){ 
    return { 
     restrict: 'C', 
     replace: true, 
     template: '<textarea></textarea>', 
    } 
});

Это один изменяет первоначальный input в textarea. Связывание через ng-model по-прежнему работает, потому что другие атрибуты не удаляются из элемента во время замены.

источник

2013-10-25 19:19:59 lort

Привет, спасибо, но я не хочу использовать шаблон или текстовое поле. Я хочу создать шаблон самостоятельно в функции компиляции. –

Textarea был только примером. Что вы подразумеваете под «созданием шаблона», как он отличается от опции 'template'? – lort

databinding настраиваемая директива угловая с заменой html в функции компиляции

ответ

Смежные вопросы