$ http请求后如何更改数据?

时间:2013-07-17 21:52:16

标签: angularjs angularjs-scope

我正在创建一个角度很好的Web应用程序,主要是使用远程json对象的数据驱动的。我想加载具有合理默认数据的页面,然后请求json对象并使用这些新数据更新控制器。

以下是我所提供服务的摘录:

clickApp.factory('client', ['$http', function($http){

var logoUrl = "first";

var getConfig = function() {
    logoUrl = "second";

    $http({method: 'GET', url: base_url+'app-config.json'}).
        success(function(data, status) {
            // this callback will be called asynchronously
            // when the response is available
            // console.log("data",data);

            console.log("logopre",logoUrl);
            logoUrl = "third";
            console.log("logopost",logoUrl);
        }).
    error(function(data, status) {
        console.log("error",status);
        // called asynchronously if an error occurs
        // or server returns response with an error status.
    });
};
getConfig();

return {
    logoUrl: logoUrl
}

}]);

我有一个连接到此的控制器,暂时只用logoUrl填充p标签。使用此代码,p标记立即更新为“秒”,“logopre”的日志值为“秒”,“logopost”的日志值为“第三”,但控制器像我期望的那样将p标签更新为“第三”。

我在我的控制器中尝试了一些花哨的$ scope。$ watch语句,但这并没有改变结果。

编辑我应该注意到我在$ http请求之后也尝试了$ rootScope。$ apply但我只能得到“$ digest in progress”错误。

如何正确更新此值,以便在$ http请求后反映在我的控制器中?

1 个答案:

答案 0 :(得分:1)

尝试这样的事情(http://plnkr.co/edit/Fnrgo4?p=preview):

app.controller('MainCtrl', function($scope, client) {
    $scope.client = client;
    $scope.$watch(function() {
        return client;
    }, function(client) {
        $scope.logoUrl = client.logoUrl;
    }, true);
});

app.factory('client', function($http, $log, $timeout) {
    var obj = {
        logoUrl: "first"
    };
    $log.info("logoinit", obj);
    var getConfig = function() {
            obj.logoUrl = "second";
            $http({
                method: 'GET',
                url: 'app-config.json'
            }).
            success(function(data, status) {
                $log.info("logopre", obj);
                obj.logoUrl = "third";
                $log.info("logopost", obj);
            }).
            error(function(data, status) {
                $log.error("error", status);
            });
        };
    getConfig();

    return obj;
});