13

以前，我曾经在加载生成的 URL 时将$sce.trustAsHtml(aString)字符串（例如，<html>...</html>）注入模板以显示图形：<div ng-bind-html="content"></div>

.state('urls', {
    url: '/urls/{id}',
    template: '<div ng-bind-html="content"></div>',
    controller: 'UrlCtrl',
    resolve: {
        url: ['$stateParams', 'urls', function ($stateParams, urls) {
            return urls.get($stateParams.id);
        }]
    }
})

app.controller('UrlCtrl', ['$sce', '$scope', 'url', function($sce, $scope, url) {
    $scope.content = $sce.trustAsHtml(url.content);
}]);

现在，用于生成图形的 html 包含对其他文件的引用，例如<script src="script.js"></script>. 所以我需要一个文件文件夹（.html, .css, .js）来绘制图表。我可以将整个文件夹放在我的服务器中，但问题是如何将这些文件注入到模板中。

我试过了templateUrl: 'http://localhost:3000/tmp/ZPBSytN5GpOwQN51AAAD/index.html'，localhost:3000/#/urls/58b8c55b5d18ed6163324fb4在浏览器中加载确实会加载 html 页面。但是，未加载，控制台日志中显示script.js错误。Failed to load resource: the server responded with a status of 404 (Not Found)

有谁知道如何修改这个？

否则，有没有其他方法可以说src=http://localhost:3000/tmp/ZPBSytN5GpOwQN51AAAD/index.html（比如 in iframe）？然后，<script src="script.js"></script>inindex.html就会知道它指的script.js是同一个文件夹中的。

编辑 1：在@Icycool 的评论之后，我更改为templateUrl: '/htmls/test.html', 并test.html包含<div ng-include="'http://localhost:3000/tmp/ZPBSytN5GpOwQN51AAAD/index.html'"></div>。测试显示它确实加载了test.html并且index.html，但不是script.js：GET http://localhost:3000/script.js?_=1488543470023 404 (Not Found)。

编辑 2：我为测试目的创建了两个文件：index.html和script.js。正如解释的那样，这是一个plunker，既不工作template也不templateUrl工作......

4

4 回答 4

4

<object>如果您愿意，可以使用。

<object type="text/html" data="https://www.matrixlead.com/tmp/index.html"></object>

在此处查看更新的 plunker 。

于 2017-03-07T08:38:16.913 回答
3

您包含的脚本是随机的 javascript 还是来自其他 Angular 项目？

我以前做过，但不记得确切的分步过程，但希望这能指引你朝着正确的方向前进：

  • 将您包含的 URL 列入白名单。
  • Istead for ng-include 看看我是如何处理返回路径的函数的。
  • 同样在路由中，您需要添加延迟加载以注入视图 + 控制器

我是这样做 的：加载外部控制器和我使用 ocLazyLoad 的视图。

https://github.com/ocombe/ocLazyLoad并定义了这样的内容：

 .state('Home', {
            url: "/home",
            views: {
                'content': {
                    templateUrl: 'http://localhost:3333/app/views/home.html',
                    resolve: {

                            loadPlugin: ['$ocLazyLoad', function ($ocLazyLoad) {
                                return $ocLazyLoad.load('http://localhost:3333/app/views/header.html');
                            }]
                        }
                }
            }
        }

为了加载外部视图，我在我的应用程序中创建了一个函数，它基本上采用外部基本 url 并附加视图然后返回它，因为当我加载一个外部应用程序时，它混淆了我所有的 URL，我有 404。

应用程序.js

 $rootScope.OtherAppUrl = 'http://localhost:3333/';

 $rootScope.appendOtherAppUrl  = function(relativeURL) {
            return $rootScope.OtherApp + relativeURL;
        }

为了包括我有这样的

<footer relativeurl="App/views/footer.html"></footer>

并且不要忘记将您的 app.js 中的 URL 列入白名单

angular.module('App').config(function ($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([
      // Allow same origin resource loads.
      'self',

      // This code is CASE SENSITIVE
      'http://localhost:3333/app/views/header.html',
      'http://localhost:3333/app/views/footer.html',


    ]);

    // The blacklist overrides the whitelist so the open redirect here is blocked.
    $sceDelegateProvider.resourceUrlBlacklist([
      'http://myapp.example.com**'
    ]);
});
于 2017-03-08T00:56:50.483 回答
2

我还分享了一个解决方案<iframe>：

<iframe src="https://www.matrixlead.com/tmp/index.html" frameBorder="0" scrolling="no" seamless="seamless"></iframe>

和一个笨蛋。

问题iframe是恐怕还有（隐藏的）边框，默认情况下框架可能不会占据整个网页。

于 2017-03-07T23:12:49.150 回答
2

我找到了一个解决方案，但可能有点过头了。我创建了一个script指令，它将未加载script到headof 中document。像这样的东西：

app.directive('script', function() {
  return {
    restrict: 'E',
    scope: false,
    link: function(scope, elem, attr) {
      var scriptNode = document.createElement('script');
      scriptNode.src = attr.src;
      scriptNode.type = 'text/javascript';
      document.head.appendChild(scriptNode);
    }
  };
});

但是，这显然没有什么限制，包括src必须是一些绝对路径。（可以克服，但它会更脏..）

我已将示例 HTML 文件放在我可以稍微调整的地方并使用它来提出这个有效的 plnkr

于 2017-03-10T06:39:30.697 回答