Angular: Retrieve updated value in directive

Question

I am filling my template named commentRecipe.html with data.

And i can call controller.add(1,2,'comment here') from inside the template.

The item gets updated in the db and returns my new result.

The Question is: How can i update ex mhRecipeId with the retrieved data.

var app = angular.module('myApp');

app.directive('mhCommentRecipe', ['$log', 'commentService', function ($log, commentService) {

        var commentController = function () {
            var that = this;

            that.add = function (commentId, recipeId, commentText) {
                if (recipeId && commentText.length > 0) {
                    var resultObj = commentService.add(commentId, recipeId, commentText);
                }
            };
         }

        return {
            restrict: 'A',
            templateUrl: '/app/templates/commentRecipe.html',
            scope: {
                mhRecipeId: '=',
                mhCommentId: '=',
                mhCommentText: '='
            },
            controller: commentController,
            controllerAs: 'controller'
    }
    }]);
(function () {

    app.factory('commentService', [
        '$log', 'httpService', function ($log, httpService) {

            var baseEndpointPath = '/myRecipes';

            return {
                add: function (commentId, recipeId, commentText) {

                    $log.debug(commentId, 'c');

                    var data = {
                        commentId,
                        recipeId,
                        commentText
                    }

                    var promise = httpService.post(baseEndpointPath + '/comment', data);

                    promise.then(function (response) {
                        // added
                    },
                        function (error) {
                            $log.error(error);
                        });
                },

                remove: function (commentId) {

                    if (commentId) {

                        var data = {
                            commentId,
                            recipeId,
                            commentText
                        }

                        data.commentId = commentId;

                        var promise = httpService.post(baseEndpointPath + '/removeComment', data);

                        promise.then(function (response) {
                            $log(response, 'removed response');
                        },
                        function (error) {
                            $log.error(error);
                        });
                    }
                }
            };
        }
    ]);

})();

app.factory('httpService', ['$http', '$q',
    function ($http, $q) {
        return {
            get: function (endpoint) {
                var deferred = $q.defer();

                $http.get(endpoint)
                    .success(function (response) {
                        deferred.resolve(response);
                    })
                    .error(function () {
                        deferred.reject('Failed to fetch response from endpoint');
                    });

                return deferred.promise;
            },
            post: function (endpoint, data, config) {
                var deferred = $q.defer();

                $http.post(endpoint, data, config)
                    .success(function (response) {
                        deferred.resolve(response);
                    })
                    .error(function () {
                        deferred.reject('Failed to post data to endpoint');
                    });

                return deferred.promise;
            },
            put: function (endpoint, data, config) {
                var deferred = $q.defer();

                $http.put(endpoint, data, config)
                    .success(function (response) {
                        deferred.resolve(response);
                    })
                    .error(function () {
                        deferred.reject('Failed to put data to endpoint');
                    });

                return deferred.promise;
            }
        };
    }]);

Answer 1

Solved the issue and i am quite embarrassed to tell the solution! In my view i just used ex: mhRecipeId when i should have used the controllers value.

Answer 2

You place the values you want to send to the directive into a variable:

// in controller
that.mhRecipeId = whateverValueHere;
that.mhCommentId = whateverValueHere;
that.mhCommentText = 'comment text';

then on the directive in html you would put:

<mh-comment-recipe mh-recipe-id="controller.mhRecipeId" mh-comment-id="controller.mhCommentId" mh-comment-text="controller.mhCommentText"></mh-comment-recipe>

This will pass the variables into the directive for use.

Unless I misunderstood your question :)