Question

我正在使用Angular和angular-dashboard库 https://github.com/DataTorrent/malhar-angular-dashboard。

我很想插入一个iframe小部件，其中src网址没有被$ sce阻止。

我按如下方式创建widgetDefinitions：

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

我通过了dashboardOptions：

$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);
  }
};

}]）;

用于解析unsafehtml的过滤器

angular.module('monitors').filter('unsafehtml', ['$sce',
function($sce) {
    return function(input) {
        return $sce.trustAsHtml(input);
    };
}
]);

我收到以下错误：

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设置网址，设置不带unsafehtml过滤器的网址。

然而，没有运气。在阅读了关于此的大部分stackoverflow问题之后，仍然没有解决。我们非常欢迎任何提示和建议。

Answer 1

尝试使用$sce.trustAsResourceUrl(input);代替$sce.trustAsHtml(input);

在角度$sce docs中搜索“iframe”。

Answer 2

您可以使用$ sce.trustAsResourceUrl（＆＃39; http://sampleTemplete.html＆＃39;）而不是$ sce.trustAsHtml（＆＃39; sampleTemplete.html＆＃39;）。使用简单的例子来避免错误：

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

通过过滤器和指令编译角度的可信资源URL

2 个答案: