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 }
}]
您的腳本過於龐大，無法輕鬆進行調試。我會建議將它分解成幾部分並測試每個部分以查看哪些部分無法正常工作。 –