Question

我有一个带有2个标签的单页应用程序，每个标签都有自己的控制器。实际上，每个选项卡上的一些视图标签都是从服务器返回的。所以我在服务中保留了异步http返回数据。但问题是甚至在从服务返回数据之前，控制器的数据绑定已经完成，我在页面上得到一个未定义的标签。

这是我的HTML COde

<!-- Sample Html Code-->
<body ng-app="myApp">
<div ng-controller="tablCtrl">{{page1.label}}</div>
<div ng-controller="tab2Ctrl">{{page2.label}}</div>
</body>

这是我的Angular app.js代码

var myApp = angular.module('myApp',[]);
myApp.service('serverData',['$http',function($http){
    this.labels = {};
    $http.post('/server/labels',{}).then(function(resp){
        this.labels = resp.data.labels
    },function(err){
        console.log("Error in service while fetching data")
    })
}])

myApp.controller('tab1Ctrl',['$scope','serverData',function($scope,serverData){
$scope.page1 = serverData.labels;
//page1 object has the label1 key with some value

}]）

myApp.controller('tab2Ctrl',['$scope','serverData',function($scope,serverData){
$scope.page2 = serverData.labels;
//page1 object has the label1 key with some value

}]）

现在的问题是，在实例化之前服务返回其数据之前，控制器不会等待但是完成其执行，因此它具有空 serverData.labels对象。

我已经阅读了有关angular $ compile服务的内容，但我不确定我是否可以在我的控制器中使用它以及如何使用它。请帮忙。感谢

Answer 1

在serverData服务this.labels = {};和$http.post this.labels = resp.data.labels中未提及相同的对象。您可以在变量中指定this并使用该变量来指定响应范围。

喜欢：var vm = this;

在服务中：

myApp.service('serverData',['$http',function($http){
    var vm = this;
    vm.labels = {};
    $http.post('/server/labels',{}).then(function(resp){
        //vm.labels = resp.data.labels
        angular.extend(vm.labels, resp.data.labels);
    },function(err){
        console.log("Error in service while fetching data")
    })
}]);

并在Controller中：

myApp.controller('tab1Ctrl' ['$scope','serverData',function($scope,serverData){
     $scope.page1 = serverData.labels;
}]);

Answer 2

没有数据，因为数据调用是异步的，但是你把它当作同步的东西，如果你像这样改变你的代码它应该工作：

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

myApp.service('serverData',['$http',function($http){

    this.getLabels = $http.post('/server/labels',{}).then(function(resp){
        return resp.data.labels;
    },function(err){
        console.log("Error in service while fetching data")
    })
}]);

myApp.controller('tab1Ctrl',['$scope','serverData',function($scope,serverData){
    serverData.getLabels()
        .then(function(labels) {
            $scope.page1 = labels;
        });
}]);

myApp.controller('tab2Ctrl',['$scope','serverData',function($scope,serverData){
    serverData.getLabels()
        .then(function(labels) {
            $scope.page2 = labels;
        });
}]);

有关$q和promises here的更多信息。

Answer 3

使用$q作为服务中的依赖项，改为编写函数：

var myApp = angular.module('myApp',[]);
myApp.service('serverData',['$http','$q',function($http,$q){

    this.getLabels = function(){
      var deferred = $q.defer();
      $http.post('/server/labels',{}).then(function(resp){
         var labels = resp.data.labels
         deferred.resolve(labels);
       },function(err){
          deferred.reject(err);
        console.log("Error in service while fetching data")
       })
      return deferred.promise;
    };


}])

    myApp.controller('tab1Ctrl',['$scope','serverData',function($scope,serverData){
       serverData.getLabels().then(
         function(labels){
           $scope.page1 = labels;
         },
         function(err){
           console.log('err',err);
         });
    });

Angularjs控制器的范围数据取决于服务中的异步http数据

3 个答案: