【问题标题】：AngularJS ng-include: Access DeniedAngularJS ng-include：访问被拒绝
【发布时间】：2016-02-28 04:47:51
【问题描述】：

我正在使用 AngularJS v.1.4.8。

我正在做一个 angularJS 教程，我正在努力在 div 上使用 ng-include。我尝试包含的部分代码在 index.html 文件中时可以正常工作，但由于某种原因，当我尝试包含它时，程序会崩溃 - 在控制台中给我一个 Error: Access Denied 消息。

该程序使用 GitHub API 来检索用户并在浏览器中显示他们的存储库。 API 连接没有问题，我也没有达到速率限制。

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`

<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`

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"; 

});

【问题讨论】：

从 userdetails.html 中删除所有代码并放入
Hello
然后看看会发生什么？还是同样的问题？
我已经尝试过了，得到了同样的错误。
值得注意的是，我是在本地运行html。不过，看不出这是问题所在。
您实际上忘记关闭链接标签。它应该像这样关闭：<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

标签： javascript html angularjs

【解决方案1】：

尝试使用带有ng-bind-html 属性的angular-sanitize.js。

包含 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>

【讨论】：

【解决方案2】：

我下载了 WampServer，它现在可以工作了……显然无法在本地访问文件，但由于某种原因，它可以通过服务器工作。

【讨论】：

正确，ngInclude 使用 ajax，因此需要服务器来解析请求。
感谢您的解释。不知道是什么原因，但现在说得通了..