AngularJS ng-include：访问被拒绝
[英]AngularJS ng-include: Access Denied
问题描述
I am using AngularJS v.1.4.8. 
我正在使用AngularJS v.1.4.8。
I am doing an angularJS tutorial and I am struggling with ng-include on a div. 我正在做一个angularJS教程，并且在div上遇到ng-include的问题。 The code inside the partial I am trying to include works fine when inside the index.html file, but for some reason when I try to include it the program breaks down - giving me an Error: Access Denied message in the console. 当我将其包含在index.html文件中时，我尝试包含的部分内部代码正常工作，但是由于某些原因，当我尝试将其包含在内时，该程序崩溃了-在控制台中给我一个Error: Access Denied消息。
The program uses the GitHub API to retrieve users and display their repos in the browser. 该程序使用GitHub API来检索用户并在浏览器中显示其存储库。 There are no issues with the API connection and I have not hit the rate limit. API连接没有问题，我还没有达到速率限制。
index.html` index.html`
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="app.js"></script>
<script src="main.ctrl.js"></script>
</head>
<body ng-app="app">
<div ng-controller="MainController">
<h1>{{message}}</h1>
<h4>{{error}}</h4>
<form name="searchUser" ng-submit="search()">
<input type="search" placeholder="username to find" ng-model="username" />
<input type="submit" value="Search" />
</form>
<div ng-include="'userdetails.html'"></div>
</div>
</body>
</html>
userdetails.html` userdetails.html`
<div>
<div>Name: {{user.name}}</div>
<div>Location: {{user.location}}</div>
<img ng-src="http://www.gravatar.com/avatar/{{user.gravatar_id}}" title="{{user.name}}" />
Order:
<select ng-model="repoSortOrder">
<option value="+name">Name</option>
<option value="-stargazers_count">Stars</option>
<option value="+language">Language</option>
</select>
</div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Stars</th>
<th>Language</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="repo in repos | orderBy:repoSortOrder">
<td>{{repo.name}}</td>
<td>{{repo.stargazers_count | number}}</td>
<td>{{repo.language}}</td>
</tr>
</tbody>
</table>
main.ctrl.js` main.ctrl.js`
angular.module("app").controller("MainController", function($scope, $http){
$scope.message = "Github Viewer";
var onUserComplete = function(response){
$scope.user = response.data;
$http.get($scope.user.repos_url)
.then(onRepos, onError);
};
var onRepos = function(response){
$scope.repos = response.data;
};
var onError = function(error){
$scope.error = error.status + ": " + error.statusText + " - " + error.data.message;
};
$scope.username = "angular";
$scope.search = function(){
$http.get("https://api.github.com/users/"+$scope.username)
.then(onUserComplete, onError);
};
$scope.repoSortOrder = "-stargazers_count";
});
2 个解决方案
解决方案1
0 2015-11-25 13:56:42
Try using angular-sanitize.js with ng-bind-html attribute. 尝试使用带有ng-bind-html属性的angular-sanitize.js 。
Include the angular-sanitize.js http://ajax.googleapis.com/ajax/libs/angularjs/XXX/angular-sanitize.js
包含angular-sanitize.js http://ajax.googleapis.com/ajax/libs/angularjs/XXX/angular-sanitize.js Add 'ngSanitize' to you module dependencies
var myApp = angular.module('myApp', ['ngSanitize']);将ngSanitize添加到您的模块依赖项中var myApp = angular.module('myApp', ['ngSanitize']);<div ng-bind-html="userdetails.html"></div>
解决方案2
0 已采纳 2015-11-26 14:21:53
我下载了WampServer，现在可以正常工作了……显然无法在本地访问文件，但是由于某种原因，它可以通过服务器工作。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.