AngularJS-include: доступ запрещен

0

Я использую AngularJS v.1.4.8.

Я делаю angularJS учебник, и я борюсь с ng-include на div. Код внутри частица, который я пытаюсь включить, прекрасно работает, когда внутри файла index.html, но по какой-то причине, когда я пытаюсь включить его, программа прерывается - давая мне сообщение об Error: Access Denied в Error: Access Denied в консоли.

Программа использует API GitHub для извлечения пользователей и отображения их репозиториев в браузере. Нет проблем с подключением 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"; 

});
  • 0
    Удалите весь код из userdetails.html и поместите <div> Hello </ div>, а затем посмотрите, что произойдет? Все еще та же проблема?
  • 0
    Я уже попробовал это и получил ту же ошибку.
Показать ещё 2 комментария
Теги:

2 ответа

0
Лучший ответ

Я загрузил WampServer, и теперь он работает... Видимо, он не смог получить доступ к файлам локально, но по какой-то причине он работает через сервер.

Поделиться
  • 0
    правильно, ngInclude использует ajax и поэтому требует, чтобы сервер проанализировал запрос.
  • 0
    Спасибо за объяснение. Не был уверен, в чем причина, но теперь это имеет смысл ..
0

Попробуйте использовать angular-sanitize.js с атрибутом ng-bind-html.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню