2017-12-03 95 views
0

我正在使用具有异步调用的服务。如何更新我的角度范围**更新**

该服务看起来像那样;

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

routesApp.factory('angRoutes', function($http) { 
    var angRoutes = { 
     async: function(id) { 

     var data = $.param({ 
      query: id 

     }); 

     var config = { 
      headers : { 
       'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;' 
      } 
     } 

     var promise = $http.post('../ajax-php.php', data, config) 
     .success(function (data, status, headers, config) { 


      return data; 
      console.log(data); 
     }) 
     .error(function (data, status, header, config) { 

     }); 

     return promise; 
     } 
    }; 
    return angRoutes; 

    }); 

当页面第一次加载时,我使用一个控制器来填充范围;

routesApp.controller('topRoutesCtrl', function topRoutesCtrl($scope,$http, angRoutes) { 
    angRoutes.async('top').then(function(data) { 
     $scope.angRoutes = data; 
     console.log(data); 
     }); 
}); 

这一切都很好。但是,当用户点击某件东西时,我使用另一个控制器。

routesApp.controller('navRoutesCtrl', function navRoutesCtrl($scope,$http, angRoutes) { 

    $scope.update = function(id) { 
    angRoutes.async(id).then(function(data) { 
     $scope.angRoutes = data; 


     console.log(data); 
     }); 

    } 

我能看到我在控制台中获取数据和ID并在更新功能获得通过,并且数据corect但它接缝,我的范围不会得到更新。它仍然是页面加载时首先发送的值。

如何更新我的范围?

UPDATE

as seen here

在我的角度HTML我做了NG-重复这样

<div ng-controller="topRoutesCtrl" class="ajax"> 
<div id="ajaxLoader"> <img class="loadingGif" src =" /images/ajax-loader.gif"> </div> 
<div data-ng-repeat="r in angRoutes.data" class="routes-block" > 
{{r.name}} 
</div> 

</div> 

现在,如果我做我的角度JS

routesApp.controller('topRoutesCtrl', function topRoutesCtrl($scope,$http, angRoutes) { 
    angRoutes.async('top').then(function(data) { 
     $scope.angRoutes = data; 
     console.log(angRoutes); 
     }); 


}); 

注意,在控制台中,我可以看到同样的事情,如果我console.log(data)console.log(angRoutes)我的应用程序但将只如果我做$scope.angRoutes = data;工作没有东西显示如果我做$scope.angRoutes = angRoutes;

所以也许我现在用的是referencve走错了路在我的NG-重复

+0

angRoutes只是对角度服务的引用,所以当你的console.log(angRoutes)时,你不可能看到{async:function()...}以外的任何东西。 – krutkowski86

回答

0

你可以使用包装$超时手动启动$消化cicle

$scope.update = function(id) { 
    angRoutes.async(id).then(function(data) { 
     $timeout(function() { 
      $scope.angRoutes = data; 
     } 
     console.log(data); 
     }); 

    } 

,但请记住,$消化cicle是$ HTTP调用后全自动triggerd和书面的行为很奇怪

+0

它做同样的事情。 $ scope.angRoutes仍然包含第一个查询的响应 – MadeInDreams