在AngularJS中包含文件中的模板


Include template from file in AngularJS

不知道我是不是搞错了。我无法通过脚本标记包含文件中的模板。有什么想法吗？

模板：

1
2
3
4
5
6
7
8
9
10
11
<script type="text/ng-template" id="test1">inside
<script type="text/ng-template" id="test2" src="templateFile.html">


  Select:
  internal
     | script inside
     | script external

 
    <ng:include src="tpl"></ng:include>

控制器：

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

jfiddle：http://jsfiddle.net/ag8zy/32/

相关讨论

实际上，stackoverflow上存在所有必需的信息

我试着总结一下：

  • ng include无法以这种方式读取SRC
  • 从第三方域读取模板应该使用$SCE，而且还有CORS限制。

请看1和2

模板：

1
2
3
4
5
6
7
8
9
<script type="text/ng-template" id="test1" src="https://tools.ietf.org/html/rfc1918">inside
<script type="text/ng-template" id="test2" src="http://mhnystatic.s3.amazonaws.com/angulartest/list.html">


  Select:
internal
     | ietf.org
     | amazonaws
    <ng:include src="tpl"></ng:include>

应用程序：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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的方法。

相关讨论