javascript - 在Angular js中编写回调函数

Question

我有一个页面，需要进行 2 个静态 Web 服务调用。第一次休息调用成功，我正在取回数据。点击第二次服务后，第一次调用的数据仍然保留在变量中。那么使用回调方法是解决这个问题的方法吗？如果是这样，如何用AngularJS的方式编写回调方法？

这是我的代码。

app.directive('collection', function() {
    return {
        restrict: "E",
        replace: true,
        scope: {
            collection: '=',
            articleData: '=',
            articleContent: '='
        },
        template: "<ul><member ng-repeat='member in collection' member='member' article-data='articleData' article-content='articleContent'></member></ul>"
    }
});

app.directive('member', function($compile,$http,getTocService) {
    return {
        restrict: "A",
        replace: true,
        scope: {
            member: '=',
            articleData: '=',
            articleContent: '='
        },
        template: "<div><li><a href='#' ng-click='getContent(member.itemId)'>{{member.title}}</a></li></div>",
        link: function(scope, element, attrs) {
            scope.getContent = function(itemId) {
                    var art = getTocService.getArtData(itemId);
            }

            if (angular.isArray(scope.member.tocItem)) {
                if (scope.member.hasChildren == "true") {
                    for (var i = 0; i < scope.member.tocItem.length; i++) {
                        if (scope.member.tocItem.title) {
                            scope.member.tocItem.title.hide = true;
                        }
                    }
                }
                element.append("<collection collection='member.tocItem'></collection>");    
                $compile(element.contents())(scope)
            }
        }
    }
});


app.controller('apdController', function($scope, getTocService,$location) {
    var bookId = $location.search().id;
    var sampdata = getTocService.getToc(bookId);
    $scope.tasks =sampdata;
//  $scope.tasks = data;

//    var artData = getTocService.getArtData('PH1234');
//    $scope.articleContent = artData;
});

app.service(
        "getTocService",
        function( $http, $q ) {
            return({
                getToc: getToc,
                getArtData: getArtData
            });

            function getToc(bookIdvar) {
                var request = $http({
                    method: "post",
                    url: "http://10.132.241.41:8082/apdpoc/services/ApdBookService/getTOC",
                    params: {
                        action: "post"
                    },
                    data: {
                        getTOCCriteria:{
                        bookId: bookIdvar
                        }
                    }
                });
                return( request.then(handleSuccess,handleError));
            }

            function getArtData(itemId) {
                var request = $http({
                    method: "post",
                    url: "http://10.132.241.41:8082/apdpoc/services/ApdBookService/getArticle",
                    params: {
                        action: "post"
                    },
                    data: {
                        getArticleCriteria:{
                        articleId: itemId,
                        locale: "en_US"
                        }
                    }
                });
                alert(data);
                return( request.then(handleSuccess,handleError));
            }
            function handleSuccess(response){
                return (response.data);
            }

            function handleError( response ) {

                if (
                    ! angular.isObject(response.data) ||
                    ! response.data.message
                    ) {
                    return($q.reject("An unknown error occurred."));
                }
                return($q.reject(response.data.message));
            }

        }
);

这里，“data”是我在两次调用中使用的变量来保存响应数据。我正在从

调用第二个服务“getArtData”

 var art = getTocService.getArtData(itemId);

Answer 1

您应该强烈考虑使用 promise 。。 Promise 允许链接，并且比回调 hell 要好得多。这里的关键字是使用then。

这篇文章解释得更好:Processing $http response in service

希望这对您有帮助。