Получение undefined в AngularJS

Question

Я работаю над созданием небольшого приложения, которое принимает входные данные из формы (ввод, являющийся именем), а затем переходит к POST имени в макет webservice с помощью $ httpBackend. После POST я затем делаю GET также из mock webservice, используя $ httpBackend, который затем получает имя/переменную, которая была установлена ​​с POST. После его получения из сервиса создается простое приветствие и отображается на клиенте.

Однако в настоящее время, когда данные теперь отображаются на клиенте, он читает «Hello undefined!». Когда он должен читать «Привет [любое имя, которое вы ввели]!». Я использовал Yeoman для создания своих приложений, поэтому я надеюсь, что каждый сможет понять мою структуру файлов и каталогов.

Моего app.js:

'use strict'; 

angular 
    .module('sayHiApp', [ 
    'ngCookies', 
    'ngMockE2E', 
    'ngResource', 
    'ngSanitize', 
    'ngRoute' 
    ]) 
    .config(function ($routeProvider) { 
    $routeProvider 
     .when('/', { 
     templateUrl: 'views/main.html', 
     controller: 'MainCtrl' 
     }) 
     .otherwise({ 
     redirectTo: '/' 
     }); 
    }) 
    .run(function($httpBackend) { 

    var name = 'Default Name'; 

    $httpBackend.whenPOST('/name').respond(function(method, url, data) { 

     //name = angular.fromJson(data); 
     name = data; 

     return [200, name, {}]; 
    }); 

    $httpBackend.whenGET('/name').respond(name); 

    // Tell httpBackend to ignore GET requests to our templates 
    $httpBackend.whenGET(/\.html$/).passThrough(); 

    }); 

Моего main.js:

'use strict'; 

angular.module('sayHiApp') 
    .controller('MainCtrl', function ($scope, $http) { 

    // Accepts form input 
    $scope.submit = function() { 

     // POSTS data to webservice 
     setName($scope.input); 

     // GET data from webservice 
     var name = getName(); 

     // Construct greeting 
     $scope.greeting = 'Hello ' + name + ' !'; 

    }; 

    function setName (dataToPost) { 

     $http.post('/name', dataToPost). 
     success(function(data) { 
     $scope.error = false; 
     return data; 
     }). 
     error(function(data) { 

     $scope.error = true; 
     return data; 
     }); 
    } 

    // GET name from webservice 
    function getName() { 

     $http.get('/name'). 
     success(function(data) { 

     $scope.error = false; 
     return data; 
     }). 
     error(function(data) { 

     $scope.error = true; 
     return data; 
     }); 

    } 

    }); 

Моего main.html:

<div class="row text-center"> 
    <div class="col-xs-12 col-md-6 col-md-offset-3"> 

     <img src="../images/SayHi.png" class="logo" /> 

    </div> 
</div> 

<div class="row text-center"> 
    <div class="col-xs-10 col-xs-offset-1 col-md-4 col-md-offset-4"> 

     <form role="form" name="greeting-form" ng-Submit="submit()"> 
      <input type="text" class="form-control input-field" name="name-field" placeholder="Your Name" ng-model="input"> 
      <button type="submit" class="btn btn-default button">Greet Me!</button> 
     </form> 

    </div> 
</div> 

<div class="row text-center"> 
    <div class="col-xs-12 col-md-6 col-md-offset-3"> 

     <p class="greeting">{{greeting}}</p> 

    </div> 
</div> 

Answer 1

На данный момент ваш метод getName() ничего не возвращает. Также вы не можете просто позвонить getName() и ожидать, что результат будет доступен сразу после вызова функции, так как $http.get() работает асинхронно. Вы должны попробовать что-то вроде этого:

function getName() { 
    //return the Promise 
    return $http.get('/name').success(function(data) { 
    $scope.error = false; 
    return data; 
    }).error(function(data) { 
    $scope.error = true; 
    return data; 
    }); 
} 

$scope.submit = function() { 
    setName($scope.input); 
    //wait for the Promise to be resolved and then update the view 
    getName().then(function(name) { 
    $scope.greeting = 'Hello ' + name + ' !'; 
    }); 
}; 

Кстати, вы должны поставить getName(), setName() в службу.

Answer 2

Вы не можете вернуть регулярную переменную из асинхронного вызова, потому что к тому моменту, когда этот блок успеха будет искушен, функция уже завершена, итерация. Вам нужно вернуть объект обещания (в качестве ориентировочной линии и использовать его из службы).

Я не исправлю ваш код, но я поделюсь с вами необходимым инструментом - обещаниями.

Следующий документ углового для $q и $http вы можете создать себе шаблон для обработки асинхронных вызовов.

Шаблон должен быть чем-то вроде этого:

angular.module('mymodule').factory('MyAsyncService', function($q, http) { 

var service = { 
    getNames: function() { 
     var params ={}; 
     var deferObject = $q.defer(); 
     params.nameId = 1; 
     $http.get('/names', params).success(function(data) { 
      deferObject.resolve(data) 
     }).error(function(error) { 
      deferObject.reject(error) 
     }); 

     return $q.promise; 
    } 
} 
}); 

angular.module('mymodule').controller('MyGettingNameCtrl', ['$scope', 'MyAsyncService', function ($scope, MyAsyncService) { 

    $scope.getName = function() { 
     MyAsyncService.getName().then(function(data) { 
      //do something with name 
     }, function(error) { 
      //Error 
     }) 
    } 
}]);