Javascript 在AngularJS中未定义

我正在构建一个小应用程序，它接受表单的输入（输入是一个名称），然后使用$httpBackend将名称发布到一个模拟Web服务。在发布之后，我还使用$httpBackend从一个模拟Web服务执行一个GET，该服务随后获取与发布一起设置的名称/变量。从服务中获取信息后，将构造一个简单的问候语，并将其显示在客户端

但是，当前，当数据现在显示回客户端时，它会显示为“Hello undefined！”，而它应该显示为“Hello[您输入的任何名称]！”。我用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();

  });

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

    }

  });

My 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>

欢迎我！
{{greeting}

此时，您的

getName（）

方法不返回任何内容。另外，由于

$http.get（）

是异步运行的，因此您不能只调用

getName（）

并期望结果在函数调用后立即可用。 您应该尝试以下方法：

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（）

放入服务。

您不能从异步调用返回正则变量，因为在执行此成功块时，函数已经完成了迭代。 您需要返回一个promise对象（作为指导，并从服务中返回）

我不会修改你的代码，但我会与你分享必要的工具-承诺

遵循angular的文档，您可以为自己构建一个异步调用处理模板

模板应该是这样的：

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

---

函数getName（）->这应该是一个真正的AngularJS服务，带有依赖注入。现在一切都是你的控制器，这在ANgular的世界里是个坏主意。对不起，我是ANgular的新手，我不知道你说的“真诚”是什么意思？你是说我应该将“setName”和“getName”函数提取到另一个单独的文件中吗？谷歌是你的朋友：-）AngularJS服务是单例的，更适合任何CRUD如果您愿意，可以另存一个文件。主要的事情是显式地创建/声明一个服务，您可以使用DI将其导入控制器。在您的服务中创建/接口您的API，编写您需要的任何CRUD函数，并返回它。你的承诺可以是服务（best）或控制器。非常感谢你花时间帮助我：）现在它返回的是[Object Object]我不知道你的服务返回的确切内容。您只需将

数据

记录到成功处理程序中的控制台，查看返回的内容并相应地转换结果（提取名称）。您可以在$http的文档中了解更多信息：