如何更新我的角度范围**更新**

时间:2017-12-03 06:02:06

标签: angularjs

我正在使用异步调用的服务。

服务看起来像那样;

   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确实在更新功能中传递,数据是核心但是它接收到我的范围没有得到更新。它仍然是页面加载时首次发送的值。

如何更新我的范围?

更新

as seen here

在我的角度HTML中,我像这样做了重复

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

所以也许我在ng-repeat中使用错误的方式参考

1 个答案:

答案 0 :(得分:0)

你可以使用wrapper $ timeout来手动启动$ digest cicle

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

    }

但请记住,在$ http调用和写入行为很奇怪之后会自动触发$ digest cicle