Question

我有一个基于单页面应用程序（SPA）的当前项目，并希望实现一个函数，根据需要哪种SPA动态地将指令加载到我的html中。

相关的代码是：

我的控制器应加载指令的部分

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

指令本身

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

当然它没有按计划运作。运行脚本后，我的HTML中唯一加载的是消息 “[object HTMLUnknownElement]]” 我非常肯定棱角分析无法找到我的指示，但我如何让它可见呢？

此外，模板文件夹与站点启动时的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]);

Angular $ compile无法找到指令

1 个答案: