javascript - 具有外部托管 templateUrl 的 AngularJS 组件？

Question

我有一个 AngularJS 应用程序，我将其作为插件加载到具有不同路径的另一个页面中。因此，我的模板 URL 必须完全限定才能解析为正确的文件。但是，我收到了 Error: $sce:insecurl
对来自不可信源的资源的处理被阻止。

我尝试使用 resourceUrlWhitelist ，但这并没有使我的错误消失，所以我想我会尝试 trustAsResourceUrl .但是，我不知道如何将它与我的组件定义结合起来。

这是我的组件:

angular
  .module('synthApp')
  .component('foo', {
    templateUrl: 'http://example.com/app/components/main.template.html',
    controller: MainController
  });

function MainController() {
  ...
}

我尝试了以下操作，但收到一个错误，提示 $sce 未知:

angular
  .module('synthApp')
  .component('foo', ['$sce', {
    templateUrl: $sce.trustAsResourceUrl('http://example.com/app/components/main.template.html'),
    controller: MainController
  }]);

function MainController() {
  ...
}

在这种情况下使用 trustAsResourceUrl 的正确方法是什么？谢谢。

Answer 1

component 接受一个普通对象。它不能像 directive 一样用于 DI。 .component('foo', ['$sce', { ... }]) 不是任何类型的 DI(不仅仅是 Angular)的正确语法，因为它不涉及可以注入(inject)依赖项的函数。

如 this answer 中所述, templateUrl 可以是启用 DI 的函数。

应该是:

angular
  .module('synthApp')
  .component('foo', {
    templateUrl: ['$sce', function ($sce) {
      return $sce.trustAsResourceUrl('http://example.com/app/components/main.template.html');
    }],
    controller: MainController
  });