0
遇到问题呈现模板，我得到我的JS错误控制台上的错误：在Angular.js
DOMException
code: 8
message: "NOT_FOUND_ERR: DOM Exception 8"
name: "NOT_FOUND_ERR"
__proto__: DOMException
我无法呈现定义模板中的JSON数据。
下面是我的代码：
的index.html
<!doctype html>
<html lang="en" ng-app="picsography">
<head>
<meta charset="utf-8">
<title>Picsography</title>
<link rel="stylesheet" href="css/app.css"/>
<link rel="stylesheet/less" href="lib/bootstrap/less/bootstrap.less">
<link rel="stylesheet/less" href="css/500.less">
</head>
<body>
<header class="navbar navbar-fixed-top" id="header">
<div class="navbar-inner">
<nav class="container">
<div class="brand">Picsography</div>
<div class="input-append pull-left">
<div class="input-append"><input type="text" id="search-field" data-provide="typeahead" placeholder="Search"><button class="btn btn-primary" style="margin-left: 0;" type="button">Search</button></div>
</div>
<div class="btn-group pull-right" id="user-menu">
<a class="btn" href="#/posts"><i class="icon-plus"></i><span> Share</span></a>
<a class="btn" href="#/view2"><i class="icon-inbox"></i><span> Inbox</span></a>
<a class="btn" href="#posts"><i class="icon-home"></i><span> Dashboard</span></a>
<a class="btn" href="#view2"><i class="icon-shopping-cart"></i><span> Marketplace</span></a>
<button class="btn dropdown-toggle" data-toggle="dropdown"><i class="icon-user"></i><span></span> <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Account Settings</span></a></li>
<li><a href="#">Privacy Settings</a></li>
<li><a href="#">Logout</a></li>
<li class="divider"></li>
<li><a href="#">Help</a></li>
</ul>
</div>
<div class="btn-group pull-right">
<a class="btn btn-mini" href="#"> 0 </span></a>
</div>
</nav>
</div>
</header>
<section class="container-fluid">
<div class="row-fluid">
<aside id="side-nav" class="well span2">
<ul class="nav nav-list">
<li class="nav-header"><i class="icon-star"></i>TRENDING NOW</li>
<li><a href="#"><i class="icon-arrow-up"></i>Animal Humor</a></li>
<li><a href="#"><i class="icon-arrow-down"></i>Movie Jokes</a></li>
<li><a href="#"><i class="icon-arrow-up"></i>Memes</a></li>
<li><a href="#"><i class="icon-arrow-down"></i>Celebrity Jokes</a></li>
<li><a href="#"><i class="icon-arrow-up"></i>Political Humor</a></li>
<li class="nav-header"><i class="icon-tags"></i>RECOMMENDED FOR YOU</li>
<li><a href="#"><i class="icon-tag"></i>Political Humor</a></li>
<li><a href="#"><i class="icon-tag"></i>Celebrity Jokes</a></li>
<li><a href="#"><i class="icon-tag"></i>Hollywood Humor</a></li>
<li><a href="#"><i class="icon-tag"></i>Animal Humor</a></li>
<li><a href="#"><i class="icon-tag"></i>Adult Humor</a></li>
</ul>
</aside>
<div ng-view class="row span10"></div>
</div>
</section>
<script src="js/less-1.3.0.min.js"></script>
<script src="lib/jquery/jquery-1.3.2.min.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-resource.min.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="lib/bootstrap/js/bootstrap-alert.js"></script>
<script src="lib/bootstrap/js/bootstrap-button.js"></script>
<script src="lib/bootstrap/js/bootstrap-carousel.js"></script>
<script src="lib/bootstrap/js/bootstrap-collapse.js"></script>
<script src="lib/bootstrap/js/bootstrap-dropdown.js"></script>
<script src="lib/bootstrap/js/bootstrap-modal.js"></script>
<script src="lib/bootstrap/js/bootstrap-popover.js"></script>
<script src="lib/bootstrap/js/bootstrap-scrollspy.js"></script>
<script src="lib/bootstrap/js/bootstrap-tab.js"></script>
<script src="lib/bootstrap/js/bootstrap-tooltip.js"></script>
<script src="lib/bootstrap/js/bootstrap-transition.js"></script>
<script src="lib/bootstrap/js/bootstrap-typeahead.js"></script>
</body>
</html>
谐音/-list.html后
<div class="subnav span12" id="subnav">
<div class="btn-group pull-left" id="sort-nav">
<a class="btn active">Popular</a>
<a class="btn">Recent</a>
<a class="btn">Favorite</a>
</div>
<div class="btn-group pull-right " id="view-nav">
<a class="btn active" id="2col"><i class="icon-th-large"></i></a>
<a class="btn" id="3col"><i class="icon-th"></i></a>
<a class="btn" id="6col"><i class="icon-th-list"></i></a>
</div>
<div class="btn-group pull-right">
<a id="reload" class="btn"><i class="icon-refresh"></i></a>
<a class="btn"><i class="icon-random"></i></a>
</div>
<div class="row span12" id="img-container">
<ul class="unstyled row">
<li class="span3" ng-repeat="post in posts">
<img src="img/1.jpg">
<p>{{post.description}}</p>
</li>
<li class="span3">
<img src="img/1.jpg">
<p>Image Description</p>
</li>
<li class="span3">
<img src="img/1.jpg">
<p>Image Description</p>
</li>
<li class="span3">
<img src="img/1.jpg">
<p>Image Description</p>
</li>
</ul>
</div>
</div>
services.js
angular.module('picsographyServices', ['ngResource']).
factory('Post', function($resource){
return $resource('json/posts.json', {}, {
query: {method:'GET', isArray:true}
});
});
controllers.js
function PostListCtrl($scope, Post) {
$scope.posts = Post.query();
}
app.js
angular.module('picsography', ['picsographyServices']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/posts', {templateUrl: 'partials/post-list.html', controller: PostListCtrl});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: MyCtrl2});
$routeProvider.otherwise({redirectTo: '/posts'});
}]);
posts.json
[{
"url": "details",
"title": "Test Title",
"description": "Sample Description",
"image": "assets/images/1.jpg",
"tags": ["photo", "internet"],
"user": "hilarl",
"comments": ["sample comment"],
"likes": 23,
"dislikes": 100,
"resolution": { "x": 150, "y": 58 }
},
{
"url": "details",
"title": "Test Title",
"description": "Sample Description",
"image": "assets/img/2.jpg",
"tags": ["photo", "internet"],
"user": "hilarl",
"comments": ["sample comment"],
"likes": 23,
"dislikes": 100,
"resolution": { "x": 150, "y": 58 }
},
{
"url": "details",
"title": "Test Title",
"description": "Sample Description",
"image": "assets/img/3.jpg",
"tags": ["photo", "internet"],
"user": "hilarl",
"comments": ["sample comment"],
"likes": 23,
"dislikes": 100,
"resolution": { "x": 150, "y": 58 }
}]
您的脚本过于庞大，无法轻松进行调试。我会建议将它分解成几部分并测试每个部分以查看哪些部分无法正常工作。 –