2016-05-05 1 views
0

私はanglejsを使ってフォーム内の入力グループを埋めています。"ngModel"の入力テキストはデフォーカス後の彼の値を表示します

jsonデータを使用していますが、入力が選択され、ページ内の他のもの(デフォーカス)をクリックするまで、入力は表示されず/値が表示されません。

これは私のコード(ジャバスクリプト/ angularjs)です:

var app = angular.module('myApp', []); 
    app.controller('registerController', function($scope,$timeout,connectWS) { 
     $scope.start = function(){ 
      connectWS.getPerson(2,function(response){ 
       var data = JSON.parse(response.response.result.result); //<----JSON data 
       $scope.register=data; //<-----value assignation 
      }); 
     }; 
    }); 

app.factory('connectWS', function($http){ 
     return { 
      getPerson: function(idVal,callback){ 
       var formData = '{'+ 
        '"data": {'+ 
         '"id":"'+idVal+'"'+ 
        '}'+ 
       '}'; 

       var request = { 
        'function': 'getdata', 
        'parameters' : formData 
       }; 

       var op = gapi.client.request({ 
        'root': 'https://script.googleapis.com', 
        'path': 'v1/scripts/' + SCRIPT_ID + ':run', 
        'method': 'POST', 
        'body': request 
       }); 

       op.execute(callback); 
      } 
     }; 

... 


... 

function checkAuth() { 
     gapi.auth.authorize({ 
      'client_id': CLIENT_ID, 
      'scope': SCOPES, 
      'immediate': true 
     }, function(authResult){ 
      var scope = angular.element(document.getElementById("registerEditionDiv")).scope(); 
      scope.$apply(function() { 
       scope.start(); 
      }); 
     }); 
    } 

コードの実行この後:

<script src="https://apis.google.com/js/client.js?onload=checkAuth"></script> 

これは(HTML/angularjs)私のコードです:

<div class="regiRow"><p>Nombre:</p> <input type="text" id="name" ng-model="register.name"/></div> 
          <div class="regiRow"><p>Fecha de nacimiento:</p> <input type="text" id="birthdate" ng-model="register.birthdate"/></div> 
+0

あなたはconnectWS.getPerson関数の定義を共有できますか?私はjsfidleでこれをテストしたいと思います。そして、あなたは$ scope.start関数を呼び出しましたか? –

+0

Hola:jsfiddleをビルドしてください。あなたのコードに何か間違ったものは見当たりません。 – pdorgambide

+0

多分問題は彼が$ scope.startを関数として定義していますが、コードの中にそれを呼び出すことはないということでしょう。それは$ scope.start = connectWS.getPerson(.....)でなければなりません。 –

答えて

0

私は今は分かりませんが、問題は "$ scope。$ digest();"を追加することで解決します。 "$ scope.start"関数内にあります。このような何か:

$scope.start = function(){ 
      connectWS.getPerson(2,function(response){ 
       var data = JSON.parse(response.response.result.result); //<----JSON data 
       $scope.register=data; //<-----value assignation 
       $scope.$digest(); //<------Magic 
      }); 
     }; 

私は本当に理由を知らない、その関数を使用して呼び出されているので、私のゲストは多分「$スコープ$(関数())を適用」であるが、私はよく分かりません。私はまだ角張ったことについてのすべてを持っています。

+1

$ scope。$ digest()は内部関数であり、モデルからビューを更新するためにAngularが使用され、その逆もあります。 $ scope。$ apply()は関数を実行し、$ digest()を自動的に呼び出します。あなたの問題は、あなたのコールバックが非同期で実行され、$ apply()ループの外側にあるということです。 $ applyをstart()から$ scope.registerに保存する場所に移動してみてください。 –

+0

@MattW私はあなたの推薦をして、それは動作します。私が値を割り当てる部分は$ scopeで囲まれています$ applyと私はスクリプトから$ scope。$ digestを削除しました。 私は不要なコードを削除したので、これはより良い解決策だと思います。 – ViROscar

+0

それを聞いてうれしいです。私はAngularがオブジェクトを監視する方法を研究します - それが使用できるいくつかの方法があります。 Angularがあなたのng-modelメソッドに基づいて間違ったメソッドを選択しているのは、おそらくこれが最悪のケースだと思います。より速いかもしれないので、$ digestの代わりに$ scope、$ watchまたは$ watchCollectionを試すこともできます。 –

関連する問題