Javascript 来自链接函数的Restful web服务调用_Javascript_Jquery_Angularjs_Rest

Javascript 来自链接函数的Restful web服务调用

javascript jquery angularjs rest

Javascript 来自链接函数的Restful web服务调用,javascript,jquery,angularjs,rest,Javascript,Jquery,Angularjs,Rest,在加载页面时，我正在进行restful调用并获取数据。这很好用。单击这些数据（左边的导航链接），我需要进行另一个rest调用并获取数据。我正试图从链接函数中实现这一点。因为我是angular js的新手，所以我不确定从那里打电话有多好/有多坏。我尝试了几个关于如何从link函数调用restfulweb服务的示例，但未能成功实现我的js文件代码如下： var app = angular.module('ngdemo', []); app.directive('collection', func

在加载页面时，我正在进行restful调用并获取数据。这很好用。单击这些数据（左边的导航链接），我需要进行另一个rest调用并获取数据。我正试图从链接函数中实现这一点。因为我是angular js的新手，所以我不确定从那里打电话有多好/有多坏。我尝试了几个关于如何从link函数调用restfulweb服务的示例，但未能成功实现

我的js文件代码如下：

var app = angular.module('ngdemo', []);

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) {
    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) {
                //scope.articleContent.content = articleData[0].getArticleResponse.articleDetail.articleContent;
                //scope.articleContent.title = articleData[0].getArticleResponse.articleDetail.title;


                    var request = $http({
                    method: "post",
                    url: "http://10.132.241.41:8082/apdpoc/services/ApdBookService/getArticle",
                    params: {
                        action: "post"
                    },
                    articleContents: {
                        getArticleCriteria:{
                            articleId: itemId,
                            locale: "en_US"

                        }
                    }
                });

                return( request.then(handleSuccess,handleError));


            }

            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) {
    var sampdata = getTocService.getToc('bookid-1');
   $scope.tasks =sampdata;

    $scope.articleContent = {};
});


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

            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 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));
}

这是预期的请求，我能够在Soap UI中获得相同请求的响应。调用rest服务时需要进行任何更改

这是一段经过清理的代码，在指令中注入了$http服务

var app = angular.module('ngdemo', []);

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) { //NOTE THE INJECTED $http
    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) {
                //scope.articleContent.content = articleData[0].getArticleResponse.articleDetail.articleContent;
                //scope.articleContent.title = articleData[0].getArticleResponse.articleDetail.title;

                var request = $http({
                    method: 'post',
                    url: 'http://10.132.241.41:8082/apdpoc/services/ApdBookService/getArticle',
                    params: {
                        action: 'post'
                    },
                    articleContents: {
                        getArticleCriteria: {
                            articleId: itemId,
                            locale: 'en_US'

                        }
                    }
                });

                return ( request.then(handleSuccess, handleError));

            };

            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) {
    $scope.tasks = getTocService.getToc('bookid-1');

    $scope.articleContent = {};
});

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

        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 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));
}

var-app=angular.module（'ngdemo'，[]）；
应用程序指令（'集合'，函数（）{
返回{
限制：'E'，
替换：正确，
范围：{
集合：“=”，
articleData:“=”，
articleContent:“=”
},
模板：“”
}
});
指令（'member'，函数（$compile，$http）{//注意注入的$http
返回{
限制：“A”，
替换：正确，
范围：{
成员：“=”，
articleData:“=”，
articleContent:“=”
},
模板：“”，
链接：函数（范围、元素、属性）{
scope.getContent=函数（itemId）{
//scope.articleContent.content=articleData[0]。getArticleResponse.articleDetail.articleContent；
//scope.articleContent.title=articleData[0]。getArticleResponse.articleDetail.title；
var请求=$http({
方法：“post”，
网址：'http://10.132.241.41:8082/apdpoc/services/ApdBookService/getArticle',
参数：{
行动:"邮政"
},
条款内容：{
getArticleCriteria：{
articleId:itemId，
地点：'en_US'
}
}
});
返回（request.then（handleSuccess，handleError））；
};
if（angular.isArray（scope.member.tocItem））{
if（scope.member.haschilds==“true”）{
对于（var i=0；i

指令中的

controller

和

link

函数的区别在于

controller

是预编译的，

link

是后编译的，但是要使用

$http

，您需要将其注入指令定义中-与您注入

$compile

@maurycy的位置相同，我实际上没有得到您所说的内容。你能详细说明一下吗？我在网上得到了一些代码，并对其进行了编辑以使其符合当前的形状。我已经清理了您的代码并添加了$http的注入。非常感谢maurycy:）它工作得很好。请您添加此答案，以便我可以接受答案。尽管作为未来的一个好标准，您应该将模板放在单引号中

”

，然后在模板中使用双引号；）将所有字符串放入

“

var app = angular.module('ngdemo', []);

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) { //NOTE THE INJECTED $http
    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) {
                //scope.articleContent.content = articleData[0].getArticleResponse.articleDetail.articleContent;
                //scope.articleContent.title = articleData[0].getArticleResponse.articleDetail.title;

                var request = $http({
                    method: 'post',
                    url: 'http://10.132.241.41:8082/apdpoc/services/ApdBookService/getArticle',
                    params: {
                        action: 'post'
                    },
                    articleContents: {
                        getArticleCriteria: {
                            articleId: itemId,
                            locale: 'en_US'

                        }
                    }
                });

                return ( request.then(handleSuccess, handleError));

            };

            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) {
    $scope.tasks = getTocService.getToc('bookid-1');

    $scope.articleContent = {};
});

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

        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 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));
}