current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite
1

I'm new to AngularJS and hoping someone can help me get my head round this please!

I'm developing a web e-reader that pulls in pages of HTML content dynamically. So far, I'm doing that with an $http AJAX call and binding it in with 'ng-bind-html-unsafe' (the HTML is our own, simply served from a directory on the same server. I have control over the HTML so I could do this differently if needs be). So each time the user presses previous/next, the controller simply fetches in the previous/next page of HTML and switches that in the model - that works great.

But next I need to augment this dynamic HTML with user additions, e.g. comments and highlights. They need to appear where the user adds them, e.g. a comment would most likely sit underneath a particular paragraph.

With JQuery I guess I would give each of the HTML elements its own ID and associate each bit of user-generated content with a particular ID. Then I could manipulate the DOM myself, for example adding each comment under its associated element.

What's the right approach with AngularJS, since the principle seems to be to avoid direct DOM manipulation altogether?

I could see how it could be done by defining the HTML content as separate elements in the model, having individual JavaScript objects for each paragraph, header, image, etc. But that would basically be defining DOM-like data in JavaScript - and that feels quite wrong and messy...

share|improve this question

1 Answer 1

up vote 0 down vote accepted

Use an "ng-include" and dynamically bind a src attribute from the controller. Adding dynamic, user generated content is as adding the binding variables to your html. Following is angular code that implements previous/next buttons that dynamically loads html templates and populates them with the user added comments. At the bottom is a link to a fully functional jsfiddle.

angular.module('app',[]).controller('controller', function($scope){
    var change;

    change = function(){
        $scope.src = $scope.page + '.html';        
    };

    $scope.page = 1;
    $scope.items = [];

    change();

    $scope.submit = function(text){
        $scope.items.push(text);
    };
    $scope.next = function () {
        if($scope.page < 3){
            $scope.page++;
            change();
        }
    };

    $scope.previous = function () {
        if($scope.page > 1){
            $scope.page--;
            change();
        }
    };

});

http://jsfiddle.net/jwanga/rnL7c/

share|improve this answer
    
Thanks, this is interesting and it's good to know about ng-include. Especially good to see a working example! I think this will work OK enough for the prototype right now, since I can go into the HTML and add the binding variables to every paragraph. If this was to become an actual product though, then it would be difficult and messy to edit the HTML for many books' worth of content though. I'd rather keep the 'content' HTML plain HTML, and augment it in my code somehow... Having said that, even with DOM manipulation I guess I'd need to modify it by adding IDs, so maybe it's just a pipe dream! –  poshaughnessy Mar 5 '13 at 17:08
    
I've marked your answer as correct, since I never specified that I want to touch the HTML as little as possible and maybe I just have to? If anyone has any further thoughts/suggestions on that, it'd be great to hear though. Thanks again! –  poshaughnessy Mar 5 '13 at 17:14
    
In case anyone stumbles across this and is looking for another answer - I asked a follow-up question in the Angular.js Google Group and had some excellent help from Peter Bacon Darwin: groups.google.com/d/msg/angular/vLuOACqmf1k/jDNcWgx7KigJ –  poshaughnessy Mar 31 '13 at 20:38

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.