簡體   English   中英

角度:檢索指令中的更新值

[英]Angular: Retrieve updated value in directive

我用數據填充名為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;
            }
        };
    }]);

您可以將要發送給指令的值放入變量中:

// 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>

這會將變量傳遞到指令中以供使用。

除非我誤解了你的問題:)

解決了問題,我很尷尬地告訴解決方案! 在我看來,我應該使用ex:mhRecipeId來使用控制器值。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM