Having trouble rendering templates in Angular.js

Question

i am getting this error on my JS error console:

DOMException
code: 8
message: "NOT_FOUND_ERR: DOM Exception 8"
name: "NOT_FOUND_ERR"
__proto__: DOMException

i am unable to render the json data on my template defined.

below is my code:

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>

partials/post-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 }
}]

Your script is too monolithic to debug easily. I would recommend breaking it up into pieces and testing each part to see what is not working. — Andrew Joslin
– Andrew Joslin, Commented Jun 21, 2012 at 1:52

xrd · Accepted Answer · 2012-08-20 15:09:05Z

2

When I upgraded to jQuery 1.8.0 this error went away for me.

answered Aug 20, 2012 at 15:09

xrd

4,0917 gold badges35 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rahul · Accepted Answer · 2013-06-25 13:46:34Z

0

I agree - faced same problem and updated to cdn link (which points to 1.9.1) and it works. Thanks for pointing me to right direction

answered Jun 25, 2013 at 13:46

rahul

3,1084 gold badges31 silver badges30 bronze badges

Collectives™ on Stack Overflow

Having trouble rendering templates in Angular.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related