Question

我试图将我的$ scope代码转换为＆＃39; ControllerAs＆＃39;代码，我在控制器功能中编写函数时遇到问题。

的index.html

<html ng-app="main">
    <head>
        <script src="angular.min.js"></script>
        <script src="script.js"></script>
    </head>

    <body ng-controller="MainController as mainCtrl">
        {{mainCtrl.message}}
        {{mainCtrl.result.username}}
    </body>
</html>

的script.js

(function() {       

    angular.module("main", [])
        .controller("MainController", ["$http",MainController]);

    function MainController($http) {
        this.message = "Hello Angular!";
        this.result = callFunction($http);

        var callFunction = function($http) {
            return $http.get("https://api.github.com/users/robconery")
                .then(onUserComplete);      
        };

        var onUserComplete = function($response) {
            return $response.data;
        };
    };

}());

以下是我要转换的$ scope代码。

(function() {

  var app = angular.module("githubViewer", []);

  var MainController = function($scope, $http) {

  var onUserComplete = function(response) {
    $scope.user = response.data;
  };

  var onError = function(reason) {
    $scope.error = "Could not fetch the user";
  };


  $http.get("https://api.github.com/users/robconery")
    .then(onUserComplete, onError);


  $scope.message = "Hello, Angular!";


};

  app.controller("MainController", ["$scope", "$http", MainController]);

}());

Answer 1

您在定义之前调用callFunction。您需要使用函数声明或在调用之前移动callFunction。以下是这两种选择的示例。

功能声明

(function() {       

    angular.module("main", [])
        .controller("MainController", ["$http",MainController]);

    function MainController($http) {
      this.message = "Hello Angular!";
      this.result = callFunction($http);
    }

    function onUserComplete(response) {
      return response.data;
    }

    function callFunction($http) {
      return $http.get('https://api.github.com/users/robconery')
        .then(onUserComplete);
    }
}());

或者：

(function() {       

    angular.module("main", [])
        .controller("MainController", ["$http",MainController]);

    var callFunction = function($http) {
        return $http.get("https://api.github.com/users/robconery")
                .then(onUserComplete);      
    };

    var onUserComplete = function($response) {
        return $response.data;
    };

    function MainController($http) {
        this.message = "Hello Angular!";
        this.result = callFunction($http);
    }
}());

有关这两种语法之间的差异，请参阅this excellent StackOverflow answer。

Answer 2

除了@ Dan的答案中的函数定义问题，还有另一个问题：你不应该在模板中绑定callFunction($http)，callFunction($http)返回一个Promise，它不会计算响应，即使在onUserComplete回调之后。

这对我有用：

function callFunction($http){
    return $http.get("https://api.github.com/users/robconery")
            .then(onUserComplete);
}
var that = this;
function onUserComplete($response){
    that.result = $response.data;
}
callFunction($http);

编辑：您的$ scope版本代码工作正常，因为在onUserComplete（）函数中，您分配给$scope.result，而不是return $response.data。你看，当你从onUserComplete返回时，then（）没有返回，它仍然返回promise，那是因为它需要支持链接。

在角度函数内调用函数

2 个答案: