คำสั่งเชิงมุม 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/. ทุกอย่างทำงานที่นั่น แปลก! ฉันจะโพสต์การอัปเดตที่นี่หากฉันพบความแตกต่างระหว่างซอกับโค้ดของฉัน


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 แต่อยู่ในโค้ดของโครงการ

ปรากฎว่าเทมเพลตไม่ได้แสดงผลโดยตรง แต่มีการใช้เวทย์มนตร์ regex เพื่อแยกวิเคราะห์ไฟล์ html แทน การเพิ่ม

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

โดยที่ element เป็นสตริงไฟล์ html ก็เพียงพอที่จะทำให้มันใช้งานได้

person cbrwizard    schedule 31.10.2017