Question

我在一个Angular脚本中有这个简短的

<script src="http://code.angularjs.org/1.2.14/angular.min.js"></script>

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

myApp.controller('MainController', ['$scope', '$http', function($scope, $http) {

    var getContent = function(filename){
        var fc = 'empty';
        $http.get(filename+'.json').success(function(data) {
            fc = data;
        });
        return fc;
    };

    $scope.filename = 'file1';
    $scope.content = getContent($scope.filename);
}]); 
</script>

<div ng-app="myApp" ng-controller="MainController">
{{filename}} - {{content}}   
</div>

和同一目录file1.json中的文件：

[
  {
    "file": "1"
  }
]

我无法在getContent获取函数来返回文件的内容。我哪里错了？

Answer 1

$ http.get向服务器发送异步请求。它不等待响应。函数getContents继续并返回'empty'。一段时间后，当响应到达时，执行fc = data，但这不会分配给$ scope.content。

相反，getContents应该返回一个promise对象，调用者应该有回调函数（在你的例子中，你使用了'success'，但是that is now deprecated并且应该被'then'替换。）

这是它的工作原理：

    myApp.controller('MainController', ['$scope', '$http', function($scope, $http) {

        var getContent = function(filename){
            return $http.get(filename+'.json');
        };

        $scope.filename = 'file1';
        getContent($scope.filename).then(function(data) {
            $scope.content = data;
        });
    }]);

Answer 2

您的函数返回一个promise，而不是函数本身的结果，因为它是异步执行的。

你想要接近的东西：

getContent($scope.filename).then(function(response){ $scope.content = response; });

作为旁注，最好避免使用$ scope，而是使用controllerAs语法。如果您需要该服务专门提供的功能，请仅使用$ scope。

使用controllerAs语法，您只需在控制器中使用 this ，而不是 $ scope ，然后在视图中使用 ctrlAs。

通过Angular中的函数返回文件的内容

2 个答案: