在$ 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不會將數據綁定到$作用域

回答

相關問題