Как использовать трансклюзию в angularjs?

В учебнике Джона Линдквиста переключение используется для захвата некоторого содержимого из директивы и поместите его в нужное место.

Но документы говорят о функции трансляции и передают ее функции контроллера и компиляции. Итак, что такое трансклюзия и как его использовать?

Ответы

Ответ 1

При создании базовой директивы переключение легко:

module.directive( 'myTransDir', function () {
  return {
    transclude: true,
    scope: true,
    replace: true,
    template: '<div><h1>Hello!</h1><div ng-transclude></div></div>',
  };
});

Поскольку шаблон содержит директиву ngTransclude, он автоматически переводит содержимое для меня. Если я использую его так:

<div my-trans-dir>
  <p>Some Content</p>
</div>

В результате получится HTML:

<div>
  <h1>Hello!</h1>
  <div>
    <p>Some Content</p>
  </div>
</div>

Ответ 2

@Josh уже охватывает ngTransclude. Это "нормальный вариант использования" для перехода.

Вы также спрашивали об этих утверждениях в документации:

контроллер - функция конструктора контроллера...
Контроллер инъектируется со следующими местными жителями:
...
$ transclude - функция связывания пересылки, предварительно привязанная к правильной области трансключений: function (cloneLinkingFn).

Функция компиляции имеет дело с преобразованием шаблона DOM...
Функция компиляции принимает следующие аргументы.
...
transclude - функция связывания пересылки: function (scope, cloneLinkingFn).

Я рассматриваю эти эзотерические варианты использования трансклюзии. Я лично видел только одно упоминание об этом в stackoverflow, и я приведу вас туда:
Что именно вы делаете с функцией transclude и функцией clone linking?

Цитата из @blesh: "эти два метода перехода заключаются в том, чтобы дать вам возможность контролировать все, что связано с вами, путем перехода через программный доступ к процессу".

Обновление. Я нашел хороший пост в блоге о переходе.

Ответ 3

Johns "Building Zippy" учебник по egghead.io - лучшее описание, которое я видел при переходе. Вы правы с обоими утверждениями, Джон просто приводит пример, но то, что происходит за кулисами, - это то, что html в разметке помещается в компилятор с помощью шаблона. В своем уроке Джон оставляет содержимое в шаблоне при аварии, и вы можете видеть, как компилятор angular объединяет разметку html и шаблон html.