AngularJS ng include:访问被拒绝

AngularJS ng-include: Access Denied

本文关键字：拒绝 访问 ng include AngularJS      更新时间：2023-09-26

我使用的是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"; 
});

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

  • 包括angular-消毒.jshttp://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>

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

相关文章：