Angular js - 指令和 ajax 调用

Question

我是 Angular 新手，我对 Angular ajax 调用有疑问。

我在收到指令后触发的服务调用时遇到了困难。我不能让它正常工作。该代码适用于控制器中的硬编码 json-data，但不知道如何将服务/工厂设置为我的远程服务。

这是我使用硬编码 json 的工作示例。 代码解释： 我的视图中有一个项目列表，并且希望在悬停每个项目时显示一个工具箱。我使用 Jquery.qtip.js 这样做。 我使用指令来显示工具箱并从控制器 json 中获取内容。 （在 getcurrentbooklist 函数中，只是想在名称相同的工具箱列表中做一个标记。）

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

listControllers.controller("StartCtrl", function ($scope) {    
    $scope.booklist = [
    { name: 'John', age: 25, gender: 'boy' },
    { name: 'Jessie', age: 30, gender: 'girl' },
    { name: 'Johanna', age: 28, gender: 'girl' },
    { name: 'Joy', age: 15, gender: 'girl' },
    { name: 'Mary', age: 28, gender: 'girl' },
    { name: 'Peter', age: 95, gender: 'boy' },
    { name: 'Sebastian', age: 50, gender: 'boy' },
    { name: 'Erika', age: 27, gender: 'girl' },
    { name: 'Patrick', age: 40, gender: 'boy' },
    { name: 'Samantha', age: 60, gender: 'girl' }
    ];

    $scope.gettooltips = function (bookid) {

        return getcurrentbooklist(bookid, $scope.booklist);
    }
});

listControllers.directive('qtip', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.qtip({
                content: {
                    text: scope.gettooltips(attrs.qtip)
                },
                position: {
                    my: 'bottom center',
                    at: 'top center'
                },
                hide: {
                    fixed: true,
                    delay: 300
                }
            });
        }
    };
});

var getcurrentbooklist = function (name, arr) {
    var rettext = "<ul>";
    for (i = 0; i < arr.length; i++) {
        if (name== arr[i].name) {
            rettext += "<li>" + arr[i].name + " - mark </li>";
        } else {
            rettext += "<li>" + arr[i].name +"</li>";
        }
    }
    rettext += "</ul>";
    return rettext;
};

谢谢

Answer 1

当你想使用服务/工厂来获取远程数据时，对 $http 的调用会返回一个 promise 对象。请查看$http.get docs here。当 Promise 解决/失败时，在获取数据后调用您的进一步操作。

Answer 2

将您的服务注入指令，服务将调用您的服务。在控制器中，您可以定义自己的函数来调用服务。

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

    listControllers.directive('qtip', ['YourService', function (YourService)  {
        return {
            restrict: 'A',                
            controller: ["$scope", "$attrs", "YourService", function ($scope, $attrs, YourService) {
               $scope.gettooltips = function (bookid) {

               return YourService.getcurrentbooklist(bookid, $scope.booklist);
             }
           }
        };
    });

Answer 3

你可以像下面这样写你的服务

 app.service(
            "myservice",
            function( $http, $q ) {
                // Return public API.
                return({
                    getdata: getdatas
                });

                function getdatas() {

                    var request = $http({
                        method: "get",
                        url: "url for calling",
                        params: {
                            action: "get"
                        }
                    });

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

                }


                function handleError( response ) {

                    if (
                        ! angular.isObject( response.data ) ||
                        ! response.data.message
                        ) {

                        return( $q.reject( "An unknown error occurred." ) );
                    }
                    // Otherwise, use expected error message.
                    return( $q.reject( response.data.message ) );
                }


                // I transform the successful response
                // from the API response payload.
                function handleSuccess( response ) {
                    return( response.data );
                }
            }
        );

从控制器你可以使用这样的服务

app.controller(
            "DemoController",
            function( $scope, myservice) {
               $scope.getdata = function() {
                    myservice.getdatas()
                        .then( function( data) {
                                //process data
                            });

                };
            );