Вызов функции в пределах угловой функции

0

Я пытаюсь преобразовать свой код области видимости в код "ControllerAs", и у меня возникли проблемы с записью функции внутри моей функции контроллера.

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;
        };
    };

}());

Вот код области $, который я пытаюсь преобразовать.

(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]);

}());
  • 1
    в чем ошибка?
  • 0
    Ничего не получается в веб-консоли Firefox
Показать ещё 6 комментариев
Теги:

2 ответа

2
Лучший ответ

Вы вызываете 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);
    }
}());

См. qaru.site/questions/59/... для различий между этими двумя синтаксисами.

Поделиться
  • 0
    Имеет ли значение порядок при использовании синтаксиса функции onUserComplete ()?
  • 0
    Нет. Объявления функций определяются во время разбора и могут быть размещены в любом порядке. Выражения функций, однако, чувствительны к порядку (так же, как любая переменная). Ответ, на который я ссылаюсь, подробно расскажет об этом.
Показать ещё 8 комментариев
0

Помимо проблемы определения функции в ответе @Dan, возникает другая проблема: вы не должны связывать callFunction($http) в шаблоне, callFunction($http) возвращает Promise, она не оценивает ответ даже после того, как onUserComplete callback.

Это работает для меня:

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);

EDIT: ваш код версии $ scope работает отлично, потому что в функции onUserComplete() вы назначаете $scope.result, а не return $response.data. Понимаете, когда вы возвращаетесь из onUserComplete, то() не возвращает этого, он все равно возвращает обещание, потому что ему необходимо поддерживать цепочку.

Поделиться
  • 0
    Хороший улов. Я пропустил это.
  • 0
    ОЙ МОЙ ГООООССССССССШ. спасибо :) AngularJS сложно. Проблема связывания довольно странная для меня и, кажется, действительно отличается от того, к чему я привык, - это программирование на Java. Есть ли название для такого правила? Как шаблон дизайна или что-то?
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню