Angular $ compile can not find директива

Question

У меня есть текущий проект, основанный на одностраничных приложениях (SPA), и я хотел бы внедрить функцию, которая динамически загружает директивы в мой html на основе того, какой вид SPA необходим.

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

1. часть моего контроллера, который должен загрузить директиву

   function checkSpaType(x) { 
   if (x === "quiz") { 
       const directivePosition = document.getElementById("spa"); 
       directivePosition.append($compile("<quizSPA></quizSPA>")($scope)); 
       }; 
   }; 
   

2. сама директива

   function quizDirective() { 
   return { 
       templateUrl: "templates/quizSPA.html", 
       controller: 'quizCtrl', 
       link: function quizSPA() {} 
        } 
   } 
   

и конечно, это не волнует k, как планировалось. После запуска скриптов единственное, что загружается в моем HTML, - это сообщение «[object HTMLUnknownElement]]» iam очень уверен, что угловая просто не нахожу мою директиву, но как я могу ее видеть?

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

У кого-нибудь есть идея?

Answer 1

Я исправил его сам прямо сейчас.

бы изменить:

directivePosition.append($compile("<quiz-s-p-a></quiz-s-p-a>")($scope)) 

к:

const spaDirective = $compile("<quiz>")($scope); 
     directivePosition.append(spaDirective[0]);