我正在尝试在 html 中使用 ng-include 来实现递归模板。我首先用 jsfiddle 尝试过，它有效。这是网址http://jsfiddle.net/uXbn6/3115/ 。 但是，当我尝试在本地做同样的事情时。我收到此错误:
Error: Access to restricted URI denied
createHttpBackend/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js:10765:1
sendReq@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js:10558:1
$http/serverRequest@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js:10268:16
processQueue@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js:14792:28
scheduleProcessQueue/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js:14808:27
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js:16052:16
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js:15870:15
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js:16160:13
bootstrapApply@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js:1679:9
invoke@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js:4523:14
这是我的完整源代码文件:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script>
angular.module("Application", []).
controller("TreeController", ['$scope', function($scope) {
$scope.links = [{
"id": 1,
"fc": "FC_1",
"adjacentLists": [{
"id": 2,
"fc": "FC_1",
"adjacentLists": [{
"id": 3,
"fc": "FC_1",
"adjacentLists": [{
"id": 7,
"fc": "FC_1",
"speedLimit": 55
}, {
"id": 6,
"fc": "FC_1",
"speedLimit": 60
}, {
"id": 8,
"fc": "FC_1",
"speedLimit": 0
}],
"speedLimit": 0
}, {
"id": 4,
"fc": "FC_1",
"speedLimit": 0
}, {
"id": 5,
"fc": "FC_2",
"adjacentLists": [{
"id": 9,
"fc": "FC_3",
"speedLimit": 0,
"query": {
"question": "Link 9 has differnet function class of FC_3 instead of FC_2 of source link 5. Do you want to continue?",
"response": false
}
}, {
"id": 11,
"fc": "FC_3",
"speedLimit": 0,
"query": {
"question": "Link 11 has differnet function class of FC_3 instead of FC_2 of source link 5. Do you want to continue?",
"response": false
}
}],
"speedLimit": 0,
"query": {
"question": "Link 5 has differnet function class of FC_2 instead of FC_1 of source link 2. Do you want to continue?",
"response": false
}
}],
"speedLimit": 0
}],
"speedLimit": 50
}, {
"id": 2,
"fc": "FC_1",
"adjacentLists": [{
"id": 3,
"fc": "FC_1",
"adjacentLists": [{
"id": 7,
"fc": "FC_1",
"speedLimit": 55
}, {
"id": 6,
"fc": "FC_1",
"speedLimit": 60
}, {
"id": 8,
"fc": "FC_1",
"speedLimit": 0
}],
"speedLimit": 0
}, {
"id": 4,
"fc": "FC_1",
"speedLimit": 0
}, {
"id": 5,
"fc": "FC_2",
"adjacentLists": [{
"id": 9,
"fc": "FC_3",
"speedLimit": 0,
"query": {
"question": "Link 9 has differnet function class of FC_3 instead of FC_2 of source link 5. Do you want to continue?",
"response": false
}
}, {
"id": 11,
"fc": "FC_3",
"speedLimit": 0,
"query": {
"question": "Link 11 has differnet function class of FC_3 instead of FC_2 of source link 5. Do you want to continue?",
"response": false
}
}],
"speedLimit": 0,
"query": {
"question": "Link 5 has differnet function class of FC_2 instead of FC_1 of source link 2. Do you want to continue?",
"response": false
}
}],
"speedLimit": 0
}, {
"id": 3,
"fc": "FC_1",
"adjacentLists": [{
"id": 7,
"fc": "FC_1",
"speedLimit": 55
}, {
"id": 6,
"fc": "FC_1",
"speedLimit": 60
}, {
"id": 8,
"fc": "FC_1",
"speedLimit": 0
}],
"speedLimit": 0
}, {
"id": 4,
"fc": "FC_1",
"speedLimit": 0
}, {
"id": 5,
"fc": "FC_2",
"adjacentLists": [{
"id": 9,
"fc": "FC_3",
"speedLimit": 0,
"query": {
"question": "Link 9 has differnet function class of FC_3 instead of FC_2 of source link 5. Do you want to continue?",
"response": false
}
}, {
"id": 11,
"fc": "FC_3",
"speedLimit": 0,
"query": {
"question": "Link 11 has differnet function class of FC_3 instead of FC_2 of source link 5. Do you want to continue?",
"response": false
}
}],
"speedLimit": 0,
"query": {
"question": "Link 5 has differnet function class of FC_2 instead of FC_1 of source link 2. Do you want to continue?",
"response": false
}
}, {
"id": 6,
"fc": "FC_1",
"speedLimit": 60
}, {
"id": 7,
"fc": "FC_1",
"speedLimit": 55
}, {
"id": 8,
"fc": "FC_1",
"speedLimit": 0
}, {
"id": 10,
"fc": "FC_1",
"adjacentLists": [{
"id": 9,
"fc": "FC_3",
"speedLimit": 0,
"query": {
"question": "Link 9 has differnet function class of FC_3 instead of FC_2 of source link 5. Do you want to continue?",
"response": false
}
}, {
"id": 11,
"fc": "FC_3",
"speedLimit": 0,
"query": {
"question": "Link 11 has differnet function class of FC_3 instead of FC_2 of source link 5. Do you want to continue?",
"response": false
}
}],
"speedLimit": 0
}, {
"id": 9,
"fc": "FC_3",
"speedLimit": 0,
"query": {
"question": "Link 9 has differnet function class of FC_3 instead of FC_2 of source link 5. Do you want to continue?",
"response": false
}
}, {
"id": 11,
"fc": "FC_3",
"speedLimit": 0,
"query": {
"question": "Link 11 has differnet function class of FC_3 instead of FC_2 of source link 5. Do you want to continue?",
"response": false
}
}];
$scope.link = $scope.links[0];
}]);
</script>
<script type="text/ng-template" id="tree_item_renderer.html">
Processing Link {{link.id}}</br>
<span ng-if="link.query">
{{link.query.question}}
</span>
<span ng-if="link.adjacentLists.length>0">
<ul>
<li ng-repeat="link in link.adjacentLists" ng-include="'tree_item_renderer.html'"></li>
</ul>
</span>
</script>
<body>
<ul ng-app="Application" ng-controller="TreeController">
<span ng-include="'tree_item_renderer.html'"></span>
</ul>
</body>
</html>
最佳答案
您的问题是您可能正在使用 file:// 协议(protocol)打开 html 文件。尝试使用简单的 http 服务器在本地提供服务(例如，如果安装了 Python，则在文件所在的目录中使用 python -m SimpleHTTPServer)。
根据the Angular docs for ngInclude :
By default, the template URL is restricted to the same domain and protocol as the application document. This is done by calling $sce.getTrustedResourceUrl on it. To load templates from other domains or protocols you may either whitelist them or wrap them as trusted values. Refer to Angular's Strict Contextual Escaping.
In addition, the browser's Same Origin Policy and Cross-Origin Resource Sharing (CORS) policy may further restrict whether the template is successfully loaded. For example, ngInclude won't work for cross-domain requests on all browsers and for file:// access on some browsers. [emphasis mine]
P.S.:运行从本地服务器提供的代码是有效的。 :)
关于javascript - ''Access to restricted URI denied'“尝试使用 ng-template 时出错，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34221112/