Arahan Angular 1 tidak ditampilkan di dalam arahan di dalam ng-repeat

Saya mengalami masalah dengan arahan Angular.

Tujuan saya adalah membuat arahan mmContentRow untuk setiap elemen dalam cakupan menggunakan ng-repeat. Direktif mmContentRow itu memiliki templat tempat direktif lain relativeDate dirender.

Masalahnya adalah relativeDate tidak dirender di dalam mmContentRow. Saya sudah mencoba banyak solusi tetapi sejauh ini tidak ada. Ini kodenya:

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: '=',
    }
  };
}]);

Contoh datanya:

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

Keluaran yang diberikan:

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

Hasil yang diharapkan:

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

Sejauh yang saya bisa lihat, relative-date di dalam arahan di dalam ng-repeat tidak dapat dikompilasi. Saya berharap Angular mengkompilasinya secara otomatis, tetapi sepertinya itu tidak terjadi. Haruskah saya secara eksplisit memberitahu Angular untuk mengkompilasi relative-date di dalam mmContentRow?

Pembaruan: Saya telah membuat biola dengan versi sederhana dari masalah saya: http://jsfiddle.net/cbrwizard/4e2r2o07/. Semuanya berfungsi di sana. Aneh! Saya akan memposting pembaruan di sini jika saya mengetahui perbedaan antara biola dan kode saya.


person cbrwizard    schedule 30.10.2017    source sumber
comment
Bisakah Anda membuat contoh sederhana di jsfiddle untuk mempercepat pencarian resolusi?   -  person Appeiron    schedule 30.10.2017
comment
masih menggaruk-garuk kepala mengapa Anda memerlukan 2 arahan khusus yang bisa dilakukan dalam satu arahan   -  person Mudassar    schedule 30.10.2017
comment
@Mudassar Saya ingin menggunakan kembali relativeDate di arahan lain juga. Dalam contoh ini saya telah menghapus detail implementasi sehingga saya mengerti dari mana pertanyaan Anda berasal   -  person cbrwizard    schedule 30.10.2017


Jawaban (1)


Berkat saran @appeiron, saya telah membuat biola http://jsfiddle.net/cbrwizard/4e2r2o07/ yang membuat saya memahami bahwa masalahnya ada di Angular, tetapi dalam kode proyek.

Ternyata template tidak dirender secara langsung, melainkan beberapa sihir regex digunakan untuk mengurai file html. Menambahkan

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

di mana element string file html sudah cukup untuk membuatnya berfungsi.

person cbrwizard    schedule 31.10.2017