Question

我正在学习AngularJS并创建一个有趣的小游乐场。以下代码是我所拥有的，但我不知道为什么getMessage（）的返回值不会返回给调用者。以下是代码

msg.html

<html ng-app="CodeApp">
<head>
<!-- Libs JS -->
<script src="asset/lib/jquery/jquery.min.js"></script>
<script src="asset/lib/angular/angular.min.js"></script>
<script src="asset/lib/angular/angular-sanitize.min.js"></script>
<script src="asset/lib/ui-route/angular-ui-router.min.js"></script>
<script src="asset/lib/angular-base64/angular-base64.min.js"></script>
<script src="asset/lib/bootstrap/js/bootstrap.min.js"></script>

<script src="js/msg-mol.js"></script>
<script src="js/msg-service.js"></script>
<script src="js/msg-controller.js"></script>

<body ng-controller="MsgController">
  Msg: {{message}}
</body>

</html>

MSG-mol.js

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

MSG-controller.js

app.controller('MsgController', ['$scope', 'MsgService',  function($scope, MsgService) {
     var msg = MsgService.getMessage();
     //debugger; (2)
     $scope.message = msg;
}]);

MSG-service.js

 app.factory('MsgService', [ '$http', function($http) {
    return {
        getMessage : function(){
            $http.get('/api/codes').success(function(data) {
                var str = "total is " + data.total;
                //debugger;  (1)
                return str;
            });
        }
    };
}]);

1）浏览器上的输出只是＆＃34; msg：＆＃34;并且{{message}}为空。我正在监视后端，并且非常确定/ api / codes /已经被调用到后端，而str将是＆＃34; Total是35＆＃34;在调试器模式下。

2）当我在chrome中运行调试模式时，我意识到在调试器（1）之前调用了debugger（2）语句。我对此没有任何线索，因为应该在调试器（1）stmt之前调用getMessage（）。

Answer 1

你必须回报承诺。

喜欢这个

getMessage: function() {
    return $http.get('/api/codes').success(function(data) {
        var str = "total is " + data.total;
        //debugger;  (1)
        return str;
    });
}

还必须使用then

来处理回调

MsgService.getMessage().then(function(msg){
  $scope.message = msg;
});

Answer 2

您错过了return功能中的getMessage。将其改为例如：

app.factory('MsgService', [ '$http', function($http) {
    return {
        getMessage : function(){
            return $http.get('/api/codes').success(function(data) {
                var str = "total is " + data.total;
                return str;
            });
        }
    };
}]);

然后在你的控制器内你需要观察结果：

app.controller('MsgController', ['$scope', 'MsgService',  function($scope, MsgService) {
     MsgService.getMessage().then(function($scope){
         $scope.message = msg;
     });
}]);

$http.get返回Promise，当服务器请求结束时，将会解析asynchronous。由于它是documentation，您需要附加一个回调来处理结果。

Answer 3

最好返回承诺并解决控制器上的承诺。

在您的服务中，

getMessage: function () {
  return $http.get('/api/codes');
}

在您的控制器中：

getMessage.success(function (data) {
  $scope.message = data.total;
})

Answer 4

使用代码查看此示例.. 检查它示例你可以首先显示第一个调试器调用和接下来..我知道我不提供你能理解的服务示例。

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

app.controller('MsgController', ['$scope','MsgService',  function($scope, MsgService) {
     var msg = MsgService.getMessage();
     alert(2);
     debugger;// (2)
     $scope.message = msg;
}]);

app.factory('MsgService', [ '$http', function($http) {
    return {
        getMessage : function(){


                var str = "total is";
                alert(1);
                debugger;  //(1)
                return str;

        }
    };
}]);

<html ng-app="CodeApp">
<head>
<!-- Libs JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>  
<script src="asset/lib/angular/angular-sanitize.min.js"></script>
<script src="asset/lib/ui-route/angular-ui-router.min.js"></script>
<script src="asset/lib/angular-base64/angular-base64.min.js"></script>
<script src="asset/lib/bootstrap/js/bootstrap.min.js"></script>

<body ng-controller="MsgController">
  Msg: {{message}}
</body>

</html>

AngularJS中的函数不会将值返回给调用者

4 个答案: