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

ранее, я $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 в той же папке.

Edit 1: после комментария @Icycool, я перешел на templateUrl: '/htmls/test.html' и test.html содержит <div ng-include="'http://localhost:3000/tmp/ZPBSytN5GpOwQN51AAAD/index.html'"></div>. Тест показал, что он действительно load test.html и index.html, но не script.js: GET http://localhost:3000/script.js?_=1488543470023 404 (Not Found).

Edit 2: я создал два файла для проверки: .HTML-код и сценарий.js. здесь plunker, ни template, ни templateUrl работает, как описано...

13
angular-ui-router angularjs angularjs-sce canvas javascript

4 ответов

Вы можете использовать <object> Если вы предпочитаете.

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

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

4

вы скрипт, который вы включаете, это просто Radom javascript или это из другого углового проекта?

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

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

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

и a plunker.

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

2

Я нашел решение, но, возможно, зашли слишком далеко. Я создал script директива вместо этого, которая поставит не загруженный script до head of document. Что-то вроде этого:--7--> 

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

2