angularjs - 带有 templateUrl 的 Angular 指令 - Plunker 上的问题？

Question

我可以链接到 Plunker 中的特定文件吗？具体来说，我想在指令中使用 Angular 的“templateUrl”来外部化我正在构建的指令的 HTML：

myApp.directive('groupedlist', function() {
  return {
    restrict: 'E',
    scope: true,
    templateUrl: '/groupedList.html',
    link: function() {}
  };
});

我有一个名为“groupedList.html”的文件，其中包含一个 HTML 模板，但这些文件似乎是 Plunker 项目中的逻辑文件——我的浏览器抱怨，因为它找不到 groupedList.html。是否可以使用 Plunker 做我想做的事情？我宁愿不使用“模板”属性，因为我想要外部化的 HTML 内容数量并不多。

Answer 1

templateUrl 不适用于绝对 URL，请改用相对 URL（如 './page.html' 或 '../templates/page.html'）。如果您需要将跨域页面加载到模板，您可以发出请求（XMLHttpRequest）并将 STRING HTML 设置为模板。

Answer 2

就像 Rafael 所说的那样，但只是添加......如果您像我一样将文件放在子文件夹中，请使用： templateUrl: 'app/home.html', styleUrls: ['app/home.css'],

你会认为'./home.html'会起作用，但即使我的组件在同一个文件夹中，它也不起作用。