我正在使用AngularJS v.1.4.8。
我正在做一个angularJS教程,我正在努力使用ng-include在div上。我试图包含的部分内部代码在index.html文件中工作正常,但出于某种原因,当我尝试包含它时程序崩溃 - 在控制台中给我一条Error: Access Denied
消息。 p>
该程序使用GitHub API检索用户并在浏览器中显示其存储库。 API连接没有问题,我没有达到速率限制。
<!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>
<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>
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";
});
答案 0 :(得分:0)
尝试将angular-sanitize.js
与ng-bind-html
属性结合使用。
包括angular-sanitize.js http://ajax.googleapis.com/ajax/libs/angularjs/X.X.X/angular-sanitize.js
为模块依赖项添加'ngSanitize'
var myApp = angular.module('myApp', ['ngSanitize']);
<div ng-bind-html="userdetails.html"></div>
答案 1 :(得分:0)
我下载了WampServer,现在可以正常工作了...显然无法在本地访问这些文件,但出于某种原因,它可以通过服务器运行。