Директива Angular 1 не отображается внутри директивы внутри ng-repeat

У меня проблемы с директивами Angular.

Моя цель — отобразить директиву mmContentRow для каждого элемента в области видимости, используя ng-repeat. У этой директивы mmContentRow есть шаблон, в котором отображается другая директива relativeDate.

Проблема в том, что relativeDate не отображается внутри mmContentRow. Я пробовал много решений, но пока ничего. Вот код:

parent.html:

  <ul>
    <mm-content-row ng-repeat="report in selected.reports" date="report.reported_date"/>
  </ul>

mm-content-row.js

angular.module('inboxDirectives').directive('mmContentRow', function() {
  return {
    restrict: 'E',
    templateUrl: 'mm-content-row.html',
    scope: {
      date: '=',
    }
  };
});

mm-content-row.html:

<li>
  <span>{{date}}</span>
  <relative-date date="{{date}}"></relative-date>
</li>

relative-date.js:

angular.module('inboxDirectives').directive('relativeDate', ['FormatDate', function(FormatDate) {
  return {
    restrict: 'E',
    template: '<span>rendered something</span>',
    scope: {
      date: '=',
    }
  };
}]);

Пример данных:

{ selected: {reports: 
[{reported_date: 1508493112758}, {reported_date: 1508493101933}]
} }

Выведенный вывод:

<ul>
  <li>
    <span>1508493112758</span>
    <relative-date date="1508493112758"></relative-date>
  </li>
  <li>
    <span>1508493101933</span>
    <relative-date date="1508493101933"></relative-date>
  </li>
</ul>

Ожидаемый результат:

<ul>
  <li>
    <span>1508493112758</span>
    <span>rendered something</span>
  </li>
  <li>
    <span>1508493101933</span>
    <span>rendered something</span>
  </li>
</ul>

Насколько я вижу, relative-date внутри директивы внутри ng-repeat не компилируется. Я ожидал, что Angular автоматически скомпилирует его, но, похоже, этого не произошло. Должен ли я явно указывать Angular компилировать relative-date внутри mmContentRow?

Обновление: я создал скрипт с упрощенной версией моей проблемы: http://jsfiddle.net/cbrwizard/4e2r2o07/. Там все работает. Странный! Я опубликую здесь обновление, если пойму разницу между скрипкой и моим кодом.


person cbrwizard    schedule 30.10.2017    source источник
comment
Можете ли вы создать простой пример на jsfiddle, чтобы ускорить поиск разрешения?   -  person Appeiron    schedule 30.10.2017
comment
все еще ломаю голову, зачем понадобились 2 пользовательские директивы, которые можно было бы сделать в одной   -  person Mudassar    schedule 30.10.2017
comment
@Mudassar Я хочу повторно использовать relativeDate и в других директивах. В этом примере я удалил детали реализации, чтобы понять, откуда взялся ваш вопрос.   -  person cbrwizard    schedule 30.10.2017


Ответы (1)


Благодаря предложению @appeiron я создал скрипт http://jsfiddle.net/cbrwizard/4e2r2o07/ что дало мне понять, что проблема в Angular, но в коде проекта.

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

$compile($(element).contents())(scope)

где element — это строка html-файла, которой было достаточно, чтобы она работала.

person cbrwizard    schedule 31.10.2017