Creating a DOM element on successful http request in AngularJS

Question

I have defined a directive with the function createDOMWallPost in the scope. The function appends the newWallPost to the element which has the dynamic-wall attribute, if the http request goes well (server responds "OK")

angular.module('p2l.directives', []).directive('dynamicWall', function(){
    return function(scope, element, attrs){
        scope.createDOMWallPost = function(newWallPost){
            $(element).append(newWallPost);
        }
    }
});

And in the controller I have

var newWallPost = $scope.newWallPost;
$http.post("/backend/newWallPost",
    {
        newWallPost : newWallPost
    }).success(function(data){
        if(data == "OK"){
            $scope.createDOMWallPost(newWallPost);
        }
    });

This works, but it does not feel like its the right way to accomplish this. What other techniques could be used for this?

Using ng-repeat with a array of wallposts would work. Why is directive required? — Chandermani
– Chandermani, Commented Sep 13, 2013 at 10:21

JoakimB · Accepted Answer · 2013-09-13 10:34:00Z

1

What you are doing is more the jquery way then the angular way. As Chandermani said in the comment. Skip the directive and when you post a new wallPost return json data including all posts from your API, save the returned data into a $scope variable and use ng-repeat to update the DOM with the new post.

Also, you do not need to use $scope.varName = function(){} when creating a function thats not gonna be executed in the template.

Some quick pseudocode

#Controller
var newWallPost = $scope.newWallPost;
$http.post("/backend/newWallPost",
    {
        newWallPost : newWallPost
    }).success(function(data){
        if(data == "OK"){
            $scope.wallPosts = data;
        }
    });

#Template
<p ng-repeat="post in wallPosts">{{ post.jsonKey }}</p>

answered Sep 13, 2013 at 10:34

JoakimB

1,2062 gold badges14 silver badges20 bronze badges

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

2 Comments

subZero Over a year ago

You're correct in assuming its the jQuery way! Your answer is more angular-y. Thanks

JoakimB Over a year ago

Normally when you feel that you want/need to use jQuery to acomplish something, save some time in asking a question here or join #angularjs on irc@freenode and just ask how it should be done. Almost always there is a much simpler more effective way of doing it :) gl and happy coding!

Collectives™ on Stack Overflow

Creating a DOM element on successful http request in AngularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related