I want to pass data to a directive once the call is successful. Below is the 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 after values have been consumed.
$scope.form.comment = "";
};
Here are two directives - the first one used for submitting the form and making the ajax request, and the second one used for updating content on the client side. I need the second directive to load content from the ajax call. The issue now is that the directive does not wait for the ajax call to finish.
.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));
})
}
};
});
Does anyone have a solution for this?