Angularjs 通过筛选器和指令在angular中编译受信任的资源url

我正在将Angular与Angular仪表板库一起使用 .

我正在努力插入一个iframe小部件，其中src url没有被$sce阻止

我创建widgetDefinitions如下：

.factory('widgetDefinitions', function($sce) {
return [
  {
    name: 'iframe',
    directive: 'iframe',
    attrs: {
        url: 'http://www.google.nl',
    }
  }
 ];
})

我通过仪表板选项：

$scope.dashboardOptions = {
        widgetButtons: true,
        widgetDefinitions: widgetDefinitions,
        defaultWidgets: defaultWidgets,
        storage: window.localStorage,
        storageId: 'explicitSave',
        explicitSave: true
    };

我对iframe小部件有一个指令：

.directive('iframe', [function ($compile, $parse) {
return {
  restrict: 'A',
  scope: true,
  replace: true,
  template: '<iframe id="iframe" src="url | unsafehtml"></iframe>', 
  link: function (scope, element, attr) {
            scope.$watch(attr.url, function() {
                            element.html($parse(attr.url)(scope));
                            $compile(element.contents())(scope);
            }, true);
  }
};

我得到以下错误：

Error: [$parse:syntax] Syntax Error: Token ':' is an unexpected token at column 5 of the expression [http://www.google.nl] starting at [://www.google.nl].

我尝试了其他一些选择： -将widgetDefinitions中的url设置为$sce.getTrustedResourceUrl并删除unsafehtml筛选器 -通过使用模板中的{url}}和scope.url设置url，在不使用unsafehtml筛选器的情况下设置url

---

然而，没有运气。在阅读了有关此的大多数stackoverflow问题后，仍然没有解决。欢迎提供任何提示和建议。

尝试

$sce.trustAsResourceUrl（输入）

而不是

$sce.trustAsHtml（输入）

在角度搜索中搜索“iframe”。
您可以使用$sce.trustAsResourceUrl（“”）而不是$sce.trustAsHtml（'sampleTemplete.html'）。使用简单示例避免错误：

//Directive for <sample-templete></sample-templete>
app.directive('sampleTemplete', function($sce) {
    return {
        scope: {},
        restrict: "E",
        templateUrl: $sce.trustAsResourceUrl('http://sampleTemplete.html')
    };  
});

//的指令
应用指令（'sampleTemplete'，函数（$sce）{
返回{
作用域：{}，
限制：“E”，
templateUrl:$sce.trustAsResourceUrl（'http://sampleTemplete.html')
};  
});
感谢您的回复。这可能是一个必要的更改，但错误仍然存在。我猜问题在$scope.范围内。$watch。由于attr.url是一个值，因此无法对其进行解析。但是，我不确定如何将其更改为在url上执行筛选器，然后编译模板以将{{url}替换为src值。您是否能够使用$sce.RESOURCE_url解析它？我也在尝试实现Malhar angular dashboard，但在使用“widgetDefinitions”属性的“dataModelType”时遇到了一些问题。
//Directive for <sample-templete></sample-templete>
app.directive('sampleTemplete', function($sce) {
    return {
        scope: {},
        restrict: "E",
        templateUrl: $sce.trustAsResourceUrl('http://sampleTemplete.html')
    };  
});