Использование ng-repeat в другой директиве с jQuery

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

Я попытался создать директиву, которая могла бы использовать ng-repeat
Однако это выглядит так, когда директива связана, ng-repeat вообще не оценивалась. Поэтому всякий раз, когда я пытался вызвать функцию jQuery внутри функции postlink, jQuery не работала.

<div my-directive>
  <div ng-repeat="image in images">
    <img ng-src="image">
  </div>
</div>

Объем содержит что-то вроде этого:

scope.images = ['http://placehold.it/100x100', 'http://placehold.it/100x100'];

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

angular.module('mymodule', []).directive('myDirective', function factory() {
  return {
    restrict: 'A',
    compile: function (tElement, tAttrs, transclude) {
      // #1
      return {
        pre: function preLink(scope, iElement, iAttrs, transclude) {
          // #2
        },
        post: function postLink (scope, iElement, iAttrs, controller) {
          // #3
        }
      };
    },
    link: function postLink(scope, iElement, iAttrs) {
      // jQuery code to convert the element
      // #4
    }
  };
});

Кроме того, в чем разница между размещением кода в #1, #2, #3 и #4 выше? Каково здесь эмпирическое правило?
Куда поместить код, например, $( "#datepicker" ).datepicker(); из jQueryUI? Поскольку, насколько я понимаю, функция будет манипулировать (преобразовывать) элемент и его дочерние элементы.
Спасибо.


jquery angularjs angularjs-directive
person verdy    schedule 04.03.2013    source источник
comment
вы должны поместить все обработчики событий и пользовательские регистрации внутри функции ссылки, поэтому вы должны поместить код выбора даты внутри функции ссылки   -  person Ajay Beniwal    schedule 04.03.2013
comment
$( "#datepicker" ).datepicker() должно быть в функции ссылки/поста   -  person Arun P Johny    schedule 04.03.2013
comment
и компиляция, и ссылка не будут работать, это либо компиляция, либо ссылка   -  person Arun P Johny    schedule 04.03.2013
comment
если удалить my-directive, будет ли работать ng-repeast   -  person Arun P Johny    schedule 04.03.2013
comment
@ArunPJohny Да, с my-directive ng-repeat и без него работает. Дело в том, что когда вызывается postLink, я не думаю, что ng-repeat еще не оценивается. Итак, когда код jQuery выполняется в postLink, код не вступает в силу и результат на странице только повторяется <div><img></div>   -  person verdy    schedule 05.03.2013

Ответы (1)


arrow_upward
4
arrow_downward

Основное различие между местами (объяснено здесь, в разделе Функция компиляции и Функция связывания глав), заключается в том, что #1 является compile function. Здесь вы должны практиковать любые преобразования DOM, которые в случае клонирования должны быть клонированы для всех элементов. Это не относится к Datepicker, так как он не только модифицирует DOM, но и должен прослушивать события из него. Если вы добавите дочерний элемент, у которого есть директива, или если вы добавите директиву к дочернему элементу, он все равно будет скомпилирован, если вы сделаете это здесь.

#2 является preLinking function и будет вызываться после компиляции, но перед функцией связывания дочерних элементов. Это означает, что вы не можете изменить DOM, потому что следующая итерация компоновщика попытается найти элементы, ранее проиндексированные функцией компиляции, и потерпит неудачу. #3 является postLinking function и вызывается после того, как все дочерние элементы были связаны, и это самое безопасное место для применения единичных модификаций, прослушивания событий и любых других приятных действий.

Вы также можете вернуть объект function вместо объекта {pre: , post: }. В этом случае он ведет себя так же, как #3 (postLinking function). Наконец, #4 совпадает с #3. Игнорируется, если у вас есть #3.

В случае нескольких директив в самом элементе или его дочерних элементах будут выполняться все compile function, затем все preLinking functions, затем все postLinking functions

Теперь к главному вопросу: #3 нужна ли вам функция компиляции. Если нет, просто отбросьте свойство compile и выберите #4.

Сделал скрипку, чтобы проиллюстрировать это поведение.

Что касается того, что изображение не загружается, вам следует изменить <img ng-src="image"> на <img ng-src="{{image}}">, так как вам нужно, чтобы Angular интерполировал свойство src.

person Caio Cunha    schedule 04.03.2013
comment
Это еще больше прояснило. Спасибо. Так что я был прав, поместив туда код jQuery. Однако знаете ли вы, почему ng-repeat не был скомпилирован правильно? - person verdy; 05.03.2013
comment
Извините, @verdy, забыл об этом. Там идет. Обновил ответ. - person Caio Cunha; 05.03.2013
comment
Ну, на самом деле это то, к чему я стремился (я не копировал свой код в том виде, в котором он был). Чтобы быть более подробным, вы можете обратиться к моему комментарию в ответ на комментарий ArunPJohny (я думаю, потому что ng-repeat не был оценен при выполнении кода jQuery в postLink). - person verdy; 05.03.2013
comment
Кажется, вам нужно сделать перерыв в ng-repeat/HTML-render. Взгляните на этот ответ. Эта скрипка показывает использование $timeout. Но этот второй является лучшим решением, если вам не обязательно нужна родительская директива . Эта секунда более уместна, поскольку она создает повторно используемую директиву Datepicker. - person Caio Cunha; 05.03.2013