Angular js - 指令和ajax調用

Question

我是一個新的角度，我有一個關於角度ajax調用的問題。

我很擔心在我的指令後觸發的服務調用。我無法讓它正常工作。該代碼與控制器中的硬編碼json數據協同工作，但idont知道如何將服務/工廠設置爲遠程服務。

這裏是我的硬編碼json的工作示例。 代碼解釋： 我有我的視圖中的項目列表，並希望顯示一個工具箱，懸停每個項目。我使用Jquery.qtip.js來做到這一點。 我使用指令來顯示工具箱並從控制器json中獲取內容。當你想使用該服務/工廠來獲得遠程數據（在功能getcurrentbooklist只是whant做一個標記在名稱相同的toolboxlist。）

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返回一個承諾對象。請檢查$http.get docs here。數據提取後對您的進一步操作的調用在承諾解析/失敗時完成。

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

       }; 
      );