Угловые директивы - когда и как использовать компиляцию, контроллер, pre-link и post-link

Question

Угловые директивы - когда и как использовать компиляцию, контроллер, pre-link и post-link

411

При написании директивы Angular можно использовать любую из следующих функций для управления поведением DOM, содержимым и внешним видом элемента, на котором объявлена директива:

компиляции
контроллер
предварительно ссылка
пост-ссылка

Кажется, есть некоторая путаница в отношении того, какую функцию следует использовать. Этот вопрос охватывает:

Основы директив

Характер функции, do и dont

8 ответов

Ещё вопросы

@ Ян См .: Перегрузка оператора . По сути это предназначено для вики сообщества. Слишком многие ответы на связанные вопросы являются частичными и не дают полной картины.
Это отличный контент, но мы просим, чтобы все здесь было в формате вопросов и ответов. Возможно, вы хотели бы разбить это на несколько отдельных вопросов, а затем дать ссылку на них из тега вики?
Этот вопрос кажется не по теме, потому что это не фактический вопрос.
Несмотря на то, что этот пост не по теме и в форме блога, он был наиболее полезен для подробного объяснения угловых директив. Пожалуйста, не удаляйте это сообщение, администраторы!
Я думаю, что @Izhaki должен представить весь этот текст в документацию AngularJS. Для этого вы должны раскошелиться на репозиторий AngularJS на GitHub github.com/angular/angular.js/edit/master/docs/content/guide/… ), отредактировать его и отправить как запрос на слияние.
Честно говоря, я даже не занимаюсь оригинальными документами. Сообщение о переполнении стека или блог обычно приводят меня в действие в течение нескольких секунд, в отличие от 15-30 минут рвать на себе волосы, пытаясь понять оригинальные документы.
toptal.com/angular-js/angular-js-demystifying-directives Отличная статья!
teropa.info/inside-the-angularjs-directive-compiler отличное объяснение

Izhaki · Answer 1 · 2014-07-07T17-58-00.000Z

В каком порядке выполняются директивные функции?

Для одной директивы

На основе следующего plunk рассмотрите следующую разметку HTML:

<body>
    <div log='some-div'></div>
</body>

Со следующим объявлением директивы:

myApp.directive('log', function() {

    return {
        controller: function( $scope, $element, $attrs, $transclude ) {
            console.log( $attrs.log + ' (controller)' );
        },
        compile: function compile( tElement, tAttributes ) {
            console.log( tAttributes.log + ' (compile)'  );
            return {
                pre: function preLink( scope, element, attributes ) {
                    console.log( attributes.log + ' (pre-link)'  );
                },
                post: function postLink( scope, element, attributes ) {
                    console.log( attributes.log + ' (post-link)'  );
                }
            };
         }
     };  

});

Выход консоли будет:

some-div (compile)
some-div (controller)
some-div (pre-link)
some-div (post-link)

Мы видим, что сначала выполняется compile, затем controller, затем pre-link и last <<26 > .

Для вложенных директив

Примечание.. Следующее не относится к директивам, которые отображают их дочерние элементы в их функции ссылок. Достаточно несколько директив Angular (например, ngIf, ngRepeat или любая директива с transclude). Эти директивы изначально будут иметь функцию link, вызываемую до вызова их дочерних директив compile.

Оригинальная разметка HTML часто делается из вложенных элементов, каждая со своей собственной директивой. Как в следующей разметке (см. plunk):

<body>
    <div log='parent'>
        <div log='..first-child'></div>
        <div log='..second-child'></div>
    </div>
</body>

Выход консоли будет выглядеть так:

// The compile phase
parent (compile)
..first-child (compile)
..second-child (compile)

// The link phase   
parent (controller)
parent (pre-link)
..first-child (controller)
..first-child (pre-link)
..first-child (post-link)
..second-child (controller)
..second-child (pre-link)
..second-child (post-link)
parent (post-link)

Здесь мы можем различать две фазы: фазу компиляции и фазу связи.

Фаза компиляции

При загрузке DOM Angular начинается фаза компиляции, где она пересекает разметку сверху вниз и вызывает compile для всех директив. Графически мы могли бы выразить это так:

Возможно, важно отметить, что на этом этапе шаблоны, которые получает функция компиляции, являются исходными шаблонами (не шаблон экземпляра).

Фаза связи

экземпляры DOM часто являются просто результатом того, что исходный шаблон отображается в DOM, но они могут быть созданы с помощью ng-repeat или введены "на лету".

Всякий раз, когда новый экземпляр элемента с директивой отображается в DOM, начинается фаза связи.

На этом этапе Angular вызывает controller, pre-link, итерирует дочерние элементы и вызывает post-link для всех директив, например:

@lzhaki Блок-схема выглядит красиво. Хотите поделиться именем инструмента построения графиков? :)
@merlin Я использовал OmniGraffle (но мог бы использовать иллюстратор или Inkscape - кроме скорости, нет ничего лучше, чем OmniGraffle, чем другие инструменты построения диаграмм, насколько это касается иллюстрации).
Плункер @ Anant исчез, так что вот новый: plnkr.co/edit/kZZks8HN0iFIY8ZaKJkA?p=preview Откройте консоль JS, чтобы увидеть операторы журнала
ПОЧЕМУ это не так, когда ng-repeat используется для дочерних директив ??? Смотрите plunk: plnkr.co/edit/HcH4r6GV5jAFC3yOZknc?p=preview
@Luckylooke У вашего планка нет дочерних элементов с директивой под ng-repeat (то есть повторяется шаблон с директивой. Если бы это было так, вы бы увидели, что их компиляция вызывается только после ссылки ng-repeat.
Что если мы хотим динамически добавить другую директиву (например, ng-click ) в DOM из пользовательской директивы: это нужно сделать на этапе compile или link ?
@floribon. Во-первых, я бы посоветовал вам опубликовать этот вопрос как отдельный вопрос, поскольку ответ может представлять интерес для других и может потребовать некоторых пояснений, которые не будут вписываться в комментарии. Кроме того, не могли бы вы уточнить, хотите ли вы добавить другую директиву в тот же элемент, где существует директива добавления?
@Izhaki Я знаю, но есть так много вопросов об этих компиляциях / ссылках, что я почти уверен, что получу дублирующий флаг. Я хочу добавить эту директиву к тому же элементу: я подозреваю, что должен удалить атрибут my-custom-dir добавить ng-click и перекомпилировать целое, но не уверен, где и когда.

Izhaki · Answer 2 · 2014-07-07T17-13-00.000Z

Что еще происходит между этими вызовами функций?

Различные директивные функции выполняются из двух других angular функций, называемых $compile (где выполняется директива compile) и внутренней функции с именем nodeLinkFn (где директива controller, preLink и postLink). В функции angular происходят различные события до и после вызова директивных функций. Возможно, наиболее важным является рекурсия ребенка. Следующая упрощенная иллюстрация показывает ключевые этапы на этапах компиляции и связи:

Чтобы продемонстрировать эти шаги, используйте следующую разметку HTML:

<div ng-repeat="i in [0,1,2]">
    <my-element>
        <div>Inner content</div>
    </my-element>
</div>

Со следующей директивой:

myApp.directive( 'myElement', function() {
    return {
        restrict:   'EA',
        transclude: true,
        template:   '<div>{{label}}<div ng-transclude></div></div>'
    }
});

Compile

API compile выглядит так:

compile: function compile( tElement, tAttributes ) { ... }

Часто параметры имеют префикс t, чтобы обозначать элементы и предоставленные атрибуты - это исходный шаблон, а не экземпляр экземпляра.

До вызова compile переданного содержимого (если есть) удаляется, и шаблон применяется к разметке. Таким образом, элемент, предоставляемый функции compile, будет выглядеть так:

<my-element>
    <div>
        "{{label}}"
        <div ng-transclude></div>
    </div>
</my-element>

Обратите внимание на то, что в данный момент переведенное содержимое не будет вставлено повторно.

После вызова директивы .compile, angular будет перемещаться по всем дочерним элементам, включая те, которые, возможно, только что были введены директивой (например, элементы шаблона).

Создание экземпляра

В нашем случае будут созданы три экземпляра исходного шаблона выше (через ng-repeat). Таким образом, следующая последовательность будет выполняться три раза, один раз для каждого экземпляра.

контроллер

API controller включает в себя:

controller: function( $scope, $element, $attrs, $transclude ) { ... }

Ввод фазы ссылки, функция ссылки, возвращаемая через $compile, теперь предоставляется с областью.

Во-первых, функция ссылки создает дочернюю область (scope: true) или изолированную область (scope: {...}), если требуется.

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

Pre-ссылка

API pre-link выглядит так:

function preLink( scope, element, attributes, controller ) { ... }

Практически ничего не происходит между вызовом директивы .controller и .preLink. angular все еще дают рекомендации относительно того, как каждый должен использоваться.

Следуя вызову .preLink, функция link будет пересекать каждый дочерний элемент - вызывая правильную функцию ссылки и прикрепляя к ней текущую область действия (которая служит в качестве родительской области для дочерних элементов).

Пост-ссылка

API post-link аналогичен API-функции pre-link:

function postLink( scope, element, attributes, controller ) { ... }

Возможно, стоит заметить, что как только вызывается директива .postLink, процесс ссылок всех его дочерних элементов завершен, включая все дочерние функции .postLink.

Это означает, что к моменту появления .postLink дети "живут" готовы. Это включает в себя:

привязка данных
применяется переход на
область применения

Шаблон на этом этапе будет выглядеть так:

<my-element>
    <div class="ng-binding">
        "{{label}}"
        <div ng-transclude>                
            <div class="ng-scope">Inner content</div>
        </div>
    </div>
</my-element>

Izhaki · Answer 3 · 2014-07-07T17-49-00.000Z

Как объявить различные функции?

Компиляция, контроль, предварительная ссылка и пост-ссылка

Если использовать все четыре функции, директива будет следовать этой форме:

myApp.directive( 'myDirective', function () {
    return {
        restrict: 'EA',
        controller: function( $scope, $element, $attrs, $transclude ) {
            // Controller code goes here.
        },
        compile: function compile( tElement, tAttributes, transcludeFn ) {
            // Compile code goes here.
            return {
                pre: function preLink( scope, element, attributes, controller, transcludeFn ) {
                    // Pre-link code goes here
                },
                post: function postLink( scope, element, attributes, controller, transcludeFn ) {
                    // Post-link code goes here
                }
            };
        }
    };  
});

Обратите внимание, что компиляция возвращает объект, содержащий как функции предварительной ссылки, так и пост-ссылки; в Angular lingo мы говорим, что функция компиляции возвращает функцию шаблона.

Компиляция, контроль и пост-связь

Если pre-link не требуется, функция компиляции может просто вернуть функцию пост-ссылки вместо объекта определения, например:

myApp.directive( 'myDirective', function () {
    return {
        restrict: 'EA',
        controller: function( $scope, $element, $attrs, $transclude ) {
            // Controller code goes here.
        },
        compile: function compile( tElement, tAttributes, transcludeFn ) {
            // Compile code goes here.
            return function postLink( scope, element, attributes, controller, transcludeFn ) {
                    // Post-link code goes here                 
            };
        }
    };  
});

Иногда рекомендуется добавить метод compile после определения метода (post) link. Для этого можно использовать:

myApp.directive( 'myDirective', function () {
    return {
        restrict: 'EA',
        controller: function( $scope, $element, $attrs, $transclude ) {
            // Controller code goes here.
        },
        compile: function compile( tElement, tAttributes, transcludeFn ) {
            // Compile code goes here.

            return this.link;
        },
        link: function( scope, element, attributes, controller, transcludeFn ) {
            // Post-link code goes here
        }

    };  
});

Контроллер и пост-связь

Если функция компиляции не требуется, можно вообще пропустить ее объявление и предоставить функцию пост-ссылки под свойством link объекта конфигурации директивы:

myApp.directive( 'myDirective', function () {
    return {
        restrict: 'EA',
        controller: function( $scope, $element, $attrs, $transclude ) {
            // Controller code goes here.
        },
        link: function postLink( scope, element, attributes, controller, transcludeFn ) {
                // Post-link code goes here                 
        },          
    };  
});

Нет контроллера

В любом из приведенных выше примеров можно просто удалить функцию controller, если это не требуется. Так, например, если нужна только функция post-link, можно использовать:

myApp.directive( 'myDirective', function () {
    return {
        restrict: 'EA',
        link: function postLink( scope, element, attributes, controller, transcludeFn ) {
                // Post-link code goes here                 
        },          
    };  
});

Izhaki · Answer 4 · 2014-07-07T17-44-00.000Z

В чем разница между исходным шаблоном и шаблоном экземпляра?

Тот факт, что Angular позволяет манипулировать DOM, означает, что разметка ввода в процессе компиляции иногда отличается от вывода. В частности, некоторая вводная разметка может быть клонирована несколько раз (например, с ng-repeat) перед тем, как быть переданной в DOM.

Angular терминология немного противоречива, но она по-прежнему различает два типа разметки:

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

Следующая разметка демонстрирует это:

<div ng-repeat="i in [0,1,2]">
    <my-directive>{{i}}</my-directive>
</div>

Источник html определяет

    <my-directive>{{i}}</my-directive>

который служит исходным шаблоном.

Но поскольку он заключен в директиву ng-repeat, этот шаблон-источник будет клонирован (3 раза в нашем случае). Эти клоны - это шаблон экземпляра, каждый из которых будет отображаться в DOM и связан с соответствующей областью.

Izhaki · Answer 5 · 2014-07-07T16-58-00.000Z

Функция компиляции

Каждая директива compile функция вызывается только один раз, когда Angular загрузочные файлы.

Официально это место для выполнения (исходных) манипуляций с шаблонами, которые не связаны с областью или привязкой данных.

В первую очередь это делается для целей оптимизации; рассмотрите следующую разметку:

<tr ng-repeat="raw in raws">
    <my-raw></my-raw>
</tr>

Директива <my-raw> будет отображать определенный набор разметки DOM. Таким образом, мы можем:

Разрешить ng-repeat дублировать исходный шаблон (<my-raw>), а затем модифицировать разметку каждого шаблона экземпляра (вне функции compile).
Измените исходный шаблон, чтобы включить требуемую разметку (в функции compile), а затем разрешите ng-repeat дублировать ее.

Если в коллекции raws есть 1000 элементов, последний вариант может быть быстрее первого.

Do

Манипулируйте разметку, чтобы она служила шаблоном для экземпляров (клонов).

Не

Прикрепить обработчики событий.
Осмотреть дочерние элементы.
Настроить наблюдения за атрибутами.
Настройка часов в области.

Izhaki · Answer 6 · 2014-07-07T17-33-00.000Z

Функция контроллера

Каждая директива controller функция вызывается всякий раз, когда создается новый связанный элемент.

Официально, функция controller находится там, где одна:

Определяет логику (методы) контроллера, которые могут совместно использоваться контроллерами.
Инициирует переменные области видимости.

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

Do

Определение логики контроллера
Инициировать переменные области

Не выполнять:

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

Рад, что вы упомянули Controller в директиве, это отличное место для инициализации области видимости. Мне было трудно обнаружить это.
Контроллер НЕ «Инициирует область», он получает доступ только к области, уже инициированной независимо от него.
@DmitriZaitsev хорошее внимание к деталям. Я исправил текст.

Izhaki · Answer 7 · 2014-07-07T17-02-00.000Z

Функция пост-ссылки

Когда вызывается функция post-link, все предыдущие шаги были выполнены - привязка, переключение и т.д.

Это, как правило, место для дальнейшего манипулирования обработанной DOM.

Do

Манипулировать DOM (визуализированные и, таким образом, созданные экземпляры) элементы.
Прикрепить обработчики событий.
Осмотреть дочерние элементы.
Настроить наблюдения за атрибутами.
Настройка часов в области.

Если кто-то использует функцию ссылки (без предварительной ссылки или пост-ссылки), полезно знать, что она эквивалентна пост-ссылке.

Izhaki · Answer 8 · 2014-07-07T18-10-00.000Z

Функция предварительной привязки

Каждая директива pre-link функция вызывается всякий раз, когда создается новый связанный элемент.

Как видно ранее в разделе порядка компиляции, функции pre-link называются parent-then-child, тогда как функции post-link называются child-then-parent.

Функция pre-link используется редко, но может быть полезна в специальных сценариях; например, когда дочерний контроллер регистрируется с родительским контроллером, но регистрация должна быть в формате parent-then-child (ngModelController делает все так).

Не выполнять:

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

Угловые директивы - когда и как использовать компиляцию, контроллер, pre-link и post-link

Основы директив

Характер функции, do и dont

Похожие вопросы:

8 ответов

В каком порядке выполняются директивные функции?

Для одной директивы

Для вложенных директив

Фаза компиляции

Фаза связи

Что еще происходит между этими вызовами функций?

Compile

Создание экземпляра

контроллер

Pre-ссылка

Пост-ссылка

Как объявить различные функции?

Компиляция, контроль, предварительная ссылка и пост-ссылка

Компиляция, контроль и пост-связь

Контроллер и пост-связь

Нет контроллера

В чем разница между исходным шаблоном и шаблоном экземпляра?

Функция компиляции

Do

Не

Функция контроллера

Do

Не выполнять:

Функция пост-ссылки

Do

Функция предварительной привязки

Не выполнять:

Ещё вопросы