В angularjs, при создании директивы, есть ли способ манипулировать DOM шаблона с помощью функции link?

Question

В angularjs, при создании директивы, есть ли способ манипулировать DOM шаблона с помощью функции link?

0

Скажем, я создаю динамическую директиву в angularjs. Я хочу использовать функцию ссылки для управления DOM шаблона html на основе аргументов.

Таким образом, в javascript для ванили я бы сделал следующее:

var template = ... //something here that sets the variable to the template
var newdiv = document.createElement("div");
template.appendChild(newdiv);

Я нашел несколько ответов, где они рассматривают шаблон как строку и просто соединяются в литеральной строке "<div></div>".

Тем не менее, я планирую сделать большую модификацию, поэтому рассматривая ее как строку, вы быстро будете слишком запутанной и будете недостижимы, если я это сделаю. Если возможно, я хотел бы относиться к нему так же, как я рассматриваю страницу DOM в обычных js.

Я также открыт для того, чтобы не иметь шаблона и просто динамически генерировать все это в функции ссылок, если это возможно для меня каким-то образом получить директиву, чтобы вернуть это

quantumbutterfly 25 июль 2016, в 00:55

Источник

0

link есть именно для этого. Шаблон автоматически создаст привязки данных, добавленные вручную элементы не будут иметь этой функции. Существует большая вероятность того, что у вас есть проблема XY, и шаблон должен быть преобразован в несколько директив, чтобы перестать быть «запутанными».
Estus Flask 24 июль 2016, в 22:29
0

Ничего страшного, если нет привязки данных, директива не будет изменена после ее создания. Как мне сделать директиву динамической, основанной на аргументах, а не возвращать один и тот же HTML каждый раз
quantumbutterfly 24 июль 2016, в 22:38
0

Существует множество возможностей, например, функция template компонента, которую можно вставить с помощью $attrs для принятия решения о строке шаблона. Предпочтительный способ зависит от случая. ng-if могут работать ng-if или ng-include . Я бы предложил обновить вопрос с подробностями о том, что именно должна делать директива, это может помочь получить качественный ответ.
Estus Flask 24 июль 2016, в 22:56
0

На данный момент все, что я хочу сделать, это выяснить, как добавить дополнительный div к корневому div шаблона. Вот и все. Как только я это выясню, я могу сделать все остальное
quantumbutterfly 24 июль 2016, в 23:10
0

Чтобы добавить в шаблон перед его компиляцией, element в функции compile может быть изменен. Чтобы добавить в скомпилированный шаблон, это element в link .
Estus Flask 24 июль 2016, в 23:52
0

Да, так много я знаю. Я хочу сделать это после того, как он скомпилирован с использованием элемента в ссылке. Но я не могу найти ничего о том, как именно я это делаю.
quantumbutterfly 24 июль 2016, в 23:54

Показать ещё 4 комментария

Теги:

javascript

html

angularjs

dom

1 ответ

Ещё вопросы

link есть именно для этого. Шаблон автоматически создаст привязки данных, добавленные вручную элементы не будут иметь этой функции. Существует большая вероятность того, что у вас есть проблема XY, и шаблон должен быть преобразован в несколько директив, чтобы перестать быть «запутанными».
Ничего страшного, если нет привязки данных, директива не будет изменена после ее создания. Как мне сделать директиву динамической, основанной на аргументах, а не возвращать один и тот же HTML каждый раз
Существует множество возможностей, например, функция template компонента, которую можно вставить с помощью $attrs для принятия решения о строке шаблона. Предпочтительный способ зависит от случая. ng-if могут работать ng-if или ng-include . Я бы предложил обновить вопрос с подробностями о том, что именно должна делать директива, это может помочь получить качественный ответ.
На данный момент все, что я хочу сделать, это выяснить, как добавить дополнительный div к корневому div шаблона. Вот и все. Как только я это выясню, я могу сделать все остальное
Чтобы добавить в шаблон перед его компиляцией, element в функции compile может быть изменен. Чтобы добавить в скомпилированный шаблон, это element в link .
Да, так много я знаю. Я хочу сделать это после того, как он скомпилирован с использованием элемента в ссылке. Но я не могу найти ничего о том, как именно я это делаю.

estus · Accepted Answer · 2016-07-24T21-24-00.000Z

Скомпилированный элемент может быть изменен в функции link. Никакие привязки или директивы не могут быть добавлены к элементу на этом этапе без перекомпиляции.

...
link: function (scope, element, attrs) {
  // jqLite element that partly implements jQuery API
  element.append(...);

  // native element that is wrapped with jqLite
  var nativeElement = element[0];
  nativeElement.appendChild(...);
}

Хорошо, но мой вопрос связан с тем, как именно я добавил бы nativeElement к элементу. element.append (nativeElement) не работает
Должно. append принимает несколько типов, включая элементы DOM, здесь следует jQuery APi. Если nativeElement является тем же элементом, что и element , он, очевидно, не будет работать. Пожалуйста, предоставьте воспроизводимый пример (плункер или около того), если у вас возникнут проблемы с этим.