[英]AngularJS component with externally hosted templateUrl?
I have an AngularJS application which I am loading as a plug in into another page with a different path. 我有一个AngularJS应用程序,正在将它作为插件加载到其他页面中,并使用不同的路径。 Therefore, my template URLs must be fully qualified in order for them to resolve to the correct file.
因此,我的模板URL必须完全合格,以便它们解析为正确的文件。 However, I am receiving
Error: $sce:insecurl Processing of a Resource from Untrusted Source Blocked
. 但是,我收到
Error: $sce:insecurl Processing of a Resource from Untrusted Source Blocked
。
I tried using resourceUrlWhitelist , but this didn't make my error go away, so I thought I would try trustAsResourceUrl . 我尝试使用resourceUrlWhitelist ,但这并没有使我的错误消失,因此我认为我将尝试使用trustAsResourceUrl 。 However, I don't know how to combine that with my component's definition.
但是,我不知道如何将其与组件的定义结合起来。
Here is my component: 这是我的组件:
angular
.module('synthApp')
.component('foo', {
templateUrl: 'http://example.com/app/components/main.template.html',
controller: MainController
});
function MainController() {
...
}
I tried the following but received an error that $sce
is unknown: 我尝试了以下操作,但收到错误消息
$sce
:
angular
.module('synthApp')
.component('foo', ['$sce', {
templateUrl: $sce.trustAsResourceUrl('http://example.com/app/components/main.template.html'),
controller: MainController
}]);
function MainController() {
...
}
What is the proper way to use trustAsResourceUrl
in this situation? 在这种情况下使用
trustAsResourceUrl
的正确方法是什么? Thanks. 谢谢。
component
accepts a plain object. component
接受一个普通对象。 It cannot be used for DI like directive
. 不能用于类似DI的
directive
。 .component('foo', ['$sce', { ... }])
isn't a correct syntax for any kind of DI (not just Angular) because it doesn't involve a function where a dependency could be injected. .component('foo', ['$sce', { ... }])
对于任何类型的DI(不仅仅是Angular)都不是正确的语法,因为它不涉及可以注入依赖项的函数。
As explained in this answer , templateUrl
can be DI-enabled function. 如此答案中所述 ,
templateUrl
可以启用DI。
It should be: 它应该是:
angular
.module('synthApp')
.component('foo', {
templateUrl: ['$sce', function ($sce) {
return $sce.trustAsResourceUrl('http://example.com/app/components/main.template.html');
}],
controller: MainController
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.