Question

我是AngularJs的新手，我在工厂模块中没有使用$ scope时遇到了一些问题。

我已经获得了控制器通过工厂使用的GET功能，并且它应该从我的数据库中返回一个列表作为json 并使用ng-repeat在html上显示它。出于某种原因，我无法找到解决方案，但事实并非如此。我唯一的猜测是，从工厂到html的数据绑定存在问题。

如何将返回的json绑定到变量并将该变量绑定到我的html？

此功能在我创建工厂之前有效，但不使用$ scope 我很丢失。我希望我能够正确解释自己。

工厂：

   (function() {

    angular.module("myApp").factory('appServicesProvider',function( $http ) {

    var restURL = "http://localhost:8080/Project/rest/api/";


   function getAllRows(allRows){

    $http.get(restURL).then(
            function(response){
                allRows = response.data.coupon;
            } 
    );
}

return{getAllRows:getAllRows}

控制器：

    (function() {

    angular.module("myApp")
    .controller("AdminController",function($scope, $http, 
     appServicesProvider) {


     // I know that this method  of scoping a service is not best and/or recommended, 
     //it just works better for me with the admin controller.
    $scope.appServicesProvider = appServicesProvider;

HTML：

   <div id="getAllRowsDiv">

        <table class="table table-hover">
         <thead>
           <tr>
               // list details

           <th></th>
           </tr>
         </thead>
         <tbody>
           <tr ng-repeat="coupon in allRows">

            // list

           </tr>
         </tbody>
   </table>
    <button  class="btn  btn-success" ng-
     click="appServicesProvider.getAllRows()"  >Get All Rows</button>
 </div>

Answer 1

使用$ q

(function() {

    angular.module("myApp").factory('appServicesProvider',function( $q, $http ) {

    var restURL = "http://localhost:8080/Project/rest/api/";


   function getAllRows(allRows){
    var deffer = $q.defer();
    $http.get(restURL).then(
            function(response){
                deffer.resolve(response.data.coupon;)
            },function(error){
                deffer.reject(error)
             } 
    );
    return deffer.promise

}

return{getAllRows:getAllRows}

并在控制器中

$scope.getRows = function(){
     appServicesProvider.getAllRows().then(function(res){
           $scope.allRows = res;
         },function(err){
           alert(err)
         })
 }
 $scope.getRows();

AngularJs从工厂进行数据绑定

1 个答案: