How to pass data from controller to directive from ajax call AngularJS

Question

I need to send data to directive when call is successful... Here is my ajax call from my controller:

$scope.items ={
                avatar: ""
 };
$scope.addComment = function(segment) {
    commentFactory.saveComment($scope.form.comment,segment,0,0)
    .success(function(data){
        $scope.items.avatar = data.avatar;
    })
    .error(function(data){
       console.log(data); 
    });

    // Reset the form once values have been consumed.
    $scope.form.comment = "";
};

And here is 2 directive first use to submit form and ajax req, second use to update content on client side. I need in second directive to load content form ajax... Problem now is directive not wait for ajax to finish call...

.directive("addcomment", function(){
    return {
        restrict: "E",
        template: '<input type="submit" addcomments class="btn btn-default pull-right" value="Send" />'
    };
})

.directive("addcomments", function($compile){
    return {
        link: function (scope, element, attrs) {
            var html = '<div>'+scope.items.avatar+'</div>';

            element.bind("click", function(){
                angular.element(document.getElementById('space-for-new-comment'))
                            .append($compile(html)(scope));
            })  
        }
    };
});

Any solution for this?

Petr Averyanov · Accepted Answer · 2015-09-08 23:36:51Z

1

I just want to show you another way of writing this: You want to put some comments, ok in html:

<div class="smartdivforcomments">
    <div ng-repeat="comment in newComments">
        {{comment.avatar}}
    </div>
</div>

In controller: $scope.newComments = []; Function for adding comments:

commentFactory.saveComment($scope.form.comment,segment,0,0)
.success(function(data){
    $scope.newComments.push({avatar : data.avatar});
})
.error(function(data){
   console.log(data); 
});

Answer to your comment to previous question: You bind to click event that is not angular, so you need to use scope.apply to correctly update your view.

answered Sep 8, 2015 at 23:36

Petr Averyanov

9,5963 gold badges25 silver badges41 bronze badges

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

3 Comments

Vladimir Djukic Over a year ago

It can't be done on that way becase I get comments from recusative api and I need to add comment below comment I want to reply but it will add data always on the end. But anywat, thans.

Petr Averyanov Over a year ago

It can be done, you may have tree as model, or smth else - point is that you should modify js-model, not html directly.

Vladimir Djukic Over a year ago

This help me... I fund way to push my new data with slice and unshift

user12121234 · Accepted Answer · 2015-09-08 22:13:14Z

0

Use a watch in the addcomments directive and wait for the controller scope variable items.avatar to be defined.

.directive("addcomments", function($compile){
  return {
    link: function (scope, element, attrs) {

      scope.$watch('items.avatar', function(newVal, oldVal) {
        // wait for async to finish
        if(scope.items.avatar === undefined) return;

        // loaded, do work now
        var html = '<div>'+scope.items.avatar+'</div>';

        element.bind("click", function() {
          angular.element(document.getElementById('space-for-new-comment'))
          .append($compile(html)(scope));
        });          
      });
    }
  };
});

answered Sep 8, 2015 at 22:13

user12121234

2,5792 gold badges28 silver badges29 bronze badges

1 Comment

Vladimir Djukic Over a year ago

Now is beter, but still not working as it should... I need to click 2 times on button to load this scope.items.avatar . Any way to fix it?

Collectives™ on Stack Overflow

How to pass data from controller to directive from ajax call AngularJS

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related