Включить шаблон из файла в AngularJS

Не уверен, что ошибся. Я не могу включить шаблон из файла через тег скрипта. Есть идеи?

Шаблон:

<script type="text/ng-template" id="test1">inside</script>
<script type="text/ng-template" id="test2" src="templateFile.html"></script>

<div ng-controller="MyCtrl">
  Select:
  <a href ng:click="tpl='first.html'">internal</a>
     | <a href ng:click="tpl='test1'">script inside</a>
     | <a href ng:click="tpl='test2'">script external</a>

  <div style="border: 1px solid;min-height: 20px">
    <ng:include src="tpl"></ng:include>
  </div>
</div>

Контроллер:

var myApp = angular.module('myApp', []);
function MyCtrl($scope, $templateCache) {
    $templateCache.put('first.html', 'First template');
}

JSFiddle: http://jsfiddle.net/aG8Zy/32/


angularjs angularjs-ng-include
person Sebastian Barth    schedule 22.11.2014    source источник
comment
Почему -1 oO? Любой комментарий плз. Не только минусовать. Пытаюсь быть хорошим SOer. :(   -  person Sebastian Barth    schedule 22.11.2014

Ответы (1)


arrow_upward
1
arrow_downward

На самом деле вся необходимая информация есть в stackoverflow.

Я пытаюсь подвести итог:

  • ng-include не может прочитать src таким образом
  • чтение шаблона из стороннего домена должно использовать $sce и более того, существуют ограничения CORS.

См. 1 и 2

Шаблон:

<script type="text/ng-template" id="test1" src="https://tools.ietf.org/html/rfc1918">inside</script>
<script type="text/ng-template" id="test2" src="http://mhnystatic.s3.amazonaws.com/angulartest/list.html"></script>

<div ng-controller="MyCtrl">
  Select:
<a href ng:click="tpl='first.html'">internal</a>
     | <a href ng:click="openTemplate('test1')">ietf.org</a>
     | <a href ng:click="openTemplate('test2')">amazonaws</a>
    <div style="border: 1px solid;min-height: 20px"><ng:include src="tpl"></ng:include></div>
</div>

Приложение:

var myApp = angular.module('myApp', [])

.config(function($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([
        // Allow same origin resource loads.
        'self',
        // Allow loading from outer templates domain.
        'https://tools.ietf.org/**',
        'http://mhnystatic.s3.amazonaws.com/**'
    ]);
})

.controller('MyCtrl', function($scope, $templateCache, $sce) {
    $templateCache.put('first.html', 'First template');

    $scope.openTemplate = function(id) {
        var src = document.querySelector('script[id="' + id + '"]').getAttribute('src');
        $scope.tpl = $sce.getTrustedResourceUrl(src);
    };
});

jsFiddle: http://jsfiddle.net/glebv/msfbr1xr/15/

Но, как видите, домен amazonaws.com можно использовать для загрузки ресурсов, а tools.ietf.org не позволяет. Оба они были добавлены в белый список

Вы должны использовать подходы, которые позволяют CORS.

person Gleb Vinnikov    schedule 22.11.2014
comment
Я вижу, что мой JSFiddle вводит в заблуждение. Я скорее хотел загружать локальные источники из того же домена, что хорошо с точки зрения CORS. Хотя ваш ответ прояснил ситуацию. Особенно с getTrustedResource(). Спасибо. - person Sebastian Barth; 23.11.2014