Создание веб-страницы с папкой внешних файлов

Ранее, я использовал $sce.trustAsHtml(aString) для вставки строки (например, <html>...</html>) в шаблон <div ng-bind-html="content"></div> для отображения графика при загрузке сгенерированного URL-адреса

.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 (например, в iframe)? Затем <script src="script.js"></script> в index.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, но NOT script.js: GET http://localhost:3000/script.js?_=1488543470023 404 (Not Found).

Изменить 2: Я создал два файла для тестирования: index.html и script.js. Вот plunker, ни template, ни templateUrl не работает, как описано...

ОТВЕТЫ

Ответ 1

Вы можете использовать <object>, если хотите.

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

См. обновленный plunker здесь.

Ответ 2

Вы script, который вы включаете, это просто radom javascript или он из другого проекта angular?

Я сделал это раньше, но не могу точно помнить шаг за шагом, но надеюсь, что это направит вас в правильном направлении:

  • Белый список URL, который вы включаете.
  • Istead для ng-include посмотрим, как я это сделал с функцией, возвращающей путь.
  • Также в маршрутизации вам нужно добавить lazyload для ввода Views + controller

Вот как я это сделал: Для загрузки внешнего контроллера и представления я использовал 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.

app.js

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

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

И в представлении включить мне понравилось

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

И не забудьте перечислить URL-адрес в своем app.js.

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**'
    ]);
});

Ответ 3

Я также разделяю решение <iframe>:

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

и plunker.

Проблема с iframe заключается в том, что я боюсь, что все еще есть (скрытые) границы, и кадр не может занимать полную веб-страницу по умолчанию.

Ответ 4

Я нашел решение, но, возможно, немного зашел слишком далеко. Вместо этого я создал директиву script, которая поместит не загруженный script в head из 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 где-нибудь, я могу немного подправить и использовать его для создания work plnkr