在$ http调用并承诺返回后，angularjs不会将数据绑定到$作用域

将数据绑定到var名为$scope的事件时遇到问题。我打电话给mysql数据库，它通过express发送数据。

app.get('/options', function(req, res) 
{ 
var arr = []; 
var query = "SELECT * FROM memberships"; 
con.query(query, function(err, result) 
{ 
    if (err) 
    { 
     console.log("error retriving memberships from the db " + err); 
     throw err; 
    } 
    res.send(result); 
}); 


/* server side of things */

现在去角边。

app.controller('MainController', ['$http', '$scope', '$log', 
    'getmemOptions', function($http, $log, $scope, getmemOptions) 

    { 
    var gymmem = this; 
    gymmem.onSubmit = onSubmit; 

    gymmem.options; 
    $scope.things; 
    var promise = $http.get('/options'); 

    promise.then(function(payload) 
    { 
    $scope.things = angular.copy(payload.data); 
    alert(JSON.stringify($scope.things)); // 1st call view $scope.things 
}); 

    alert(JSON.stringify($scope.things)); // 2nd call view $scope.things

在我第一次调用JSON.stringify($scope.things)我可以看到它拉从数据库中正确的信息;然而第二次调用产生未定义。我知道javascript的异步性质，因为$http调用将返回一个承诺。我相信我正在处理这个承诺，但如果我不是，请让我知道我可以如何改变这个问题。先谢谢你！！

EDIT

这里是角formly模板。

 gymmem.model = 
    { 
     first_n: '', 
     last_n: '', 
     email: '', 
     age: '', 
     memberships: '', 
    }; 

    gymmem.fields = [ 
     { 
      key: 'first_n', 
      type: 'input', 
      model: gymmem.model.f_name, 
      templateOptions: 
      { 
       type: 'text', 
       label: 'First Name', 
       placeholder: 'Enter your first name', 
       required: true 
      } 
     }, 

     { 
      key: 'last_n', 
      type: 'input', 
      // model: gymmem.model.l_name, 
      templateOptions: 
      { 
       type: 'text', 
       label: 'Last Name', 
       placeholder: 'Enter your last name', 
       required: true 
      } 
     }, 

     { 
      key: 'email', 
      type: 'input', 
      //model: gymmem.model.email, 
      templateOptions: 
      { 
       type: 'text', 
       label: 'Email Address', 
       placeholder: 'Enter your email address', 
       required: true 
      }, 
      hideExpression: '!model.first_n || !model.last_n' 
     }, 

     { 
      key: 'age', 
      type: 'input', 
      //model: gymmem.model.age, 
      templateOptions: 
      { 
       type: 'number', 
       label: 'Age (must be 16+)', 
       placeholder: 'Enter your age', 
       required: true 
      }, 
      //check if customer is 16+ 
      validators: 
      { 
        ofAge: function($viewValue, $modelValue, scope) 
        { 
         var age = $viewValue || $modelValue; 
         if (age >= 16) 
          return true; 
         return false; 
        } 
      } 
     }, 

     { 
      key: 'memberships', 
      type: 'select', 
      model: gymmem.model.membership, 
      templateOptions: 
      { 
       label: 'Membership Types', 
       required: true, 
       placeholder: "Select Membership", 
       options: $scope.things//[{"name":"Martial Arts Membership","value":45},{"name":"Regular Gym Membership","value":30},{"name":"Cardio Classes Membership","value":35}] 


      } 
     }, 

    ]; 

    function onSubmit() 
    { 
      //alert(JSON.stringify(gymmem.model), null, 2); 
      $http.post('/', gymmem.model).success(function(req) 
      { 
       gymmem.model = {}; 
       console.log("Front end data " +req); 
      }).error(function(err) 
      { 
       console.log(err); 
      }); 
    }; 


    } 

]);

这里以防万一是html。

<body ng-app="GymApp" ng-controller="MainController as gymmem"> 

<div class="container col-md-4 col-md-offset-4"> 
    <form ng-submit="gymmem.onSubmit()" novalidate> 
     <h1> Buy Gym Membership(s) </h1> 
     <formly-form model="gymmem.model" fields="gymmem.fields"> 
     <button type="submit" class="btn btn-primary submit-button">Submit</button> 
     </formly-form> 
    </form> 
</div> 
</body>

[{ “名称”： “武术成员”， “值”：45}，{ “名称”： “普通健身房会员资格”， “值”：30}，{ “名称”：” Cardio Classes Membership“，”value“：35}]是我希望$ scope.things拥有的数据。这里的数据正在通过$ http.get（）调用进行处理。

对格式问题抱歉。新的到stackoverflow发布和有点匆忙。

来源

2017-06-14 Simron Patel

如果您在第一个alert()中获得结果，那么在我看来，您正在处理$http电话就好了。

这里的问题似乎是你的控制器声明中：

app.controller('MainController', ['$http', '$scope', '$log', 
'getmemOptions', function($http, $log, $scope, getmemOptions)

你有不匹配的依赖注射。请注意0是您的第二次进样，但在您的控制器功能中，您将其称为$log。所以你在这里实际上没有约束任何东西到$scope。你真的想把它绑定到$log。

变化控制器声明你的依赖关系的顺序是：

app.controller('MainController', ['$http', '$scope', '$log', 
'getmemOptions', function($http, $scope, $log, getmemOptions)

来源

2017-06-14 17:05:22

我改变依赖的顺序;然而这不是问题。在我将它绑定到名为“var options”的变量之前，我添加了$ scope以查看是否可以改变任何内容。我是angularjs的新手，所以如果有什么简单的东西，请告诉我。另外，为什么downvote？ –

@SimronPatel，绑定到一个名为options的变量只有在你使用ControllerAs语法时才起作用，这似乎是你想用'gymmem'完成的。如果你得到的数据，那么你没有正确地绑定到模板。你能否也提供你的模板代码？ downvote不是我。我会让你反感，这绝对是一个有效的问题。 –

当然，给我一下。感谢碰撞。 –

在$ http调用并承诺返回后，angularjs不会将数据绑定到$作用域

回答

相关问题