javascript - Angular : Retrieve updated value in directive

Question

我正在用数据填充名为 commentRecipe.html 的模板。

我可以从模板内部调用controller.add(1,2,'comment here')。

该项目在数据库中更新并返回我的新结果。

问题是:我如何使用检索到的数据更新 ex mhRecipeId。

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

将要发送到指令的值放入变量中:

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

然后在 html 指令中添加:

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

这会将变量传递到指令中以供使用。

除非我误解了你的问题:)