2016-05-05 18 views
0

Ich benutze angularjs um eine Gruppe von Eingaben innerhalb eines Formulars zu füllen.Eingabe Text mit "ngModel" zeigen seinen Wert nur nach Defokussierung

Zum Füllen dieser Eingänge verwende ich einen JSON-Daten und es funktioniert, aber die Eingänge zeigt/zeigen die Werte nicht an, bis ich den Eingang auswählen und dann auf irgendeinen anderen auf der Seite klicken (defocus).

dies ist mein Code (javascript/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(); 
      }); 
     }); 
    } 

der Code laufen danach:

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

dies mein Code (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

können Sie bitte die Definition Ihrer connectWS.getPerson-Funktion teilen? Ich würde das gern in jsfidle testen. Und nannten Sie die Funktion $ scope.start? –

+0

Hola: Bitte bauen Sie eine JSFiddle, ich kann nichts in Ihrem Code falsch sehen. – pdorgambide

+0

Vielleicht ist das Problem, dass er $ scope.start als eine Funktion definiert, aber nicht innerhalb des Codes. Es sollte $ scope.start = connectWS.getPerson (.....) sein; –

Antwort

0

aus einem Grund, den ich jetzt nicht kenne, wird das Problem gelöst, indem man "$ scope. $ Digest();" in der Funktion "$ scope.start". so etwas wie diese:

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

ich weiß wirklich nicht, warum, ich Gast vielleicht, weil diese Funktion mit genannt wird „$ Umfang anwenden $ (function())“, aber ich bin nicht sicher. ich habe immer noch nichts mit eckigen.

+1

$ scope. $ Digest() ist die interne Funktion, die Angular verwendet, um die Ansicht vom Modell zu aktualisieren und umgekehrt. $ scope. $ apply() führt eine Funktion aus und ruft dann $ digest() automatisch auf. Ich denke, Ihr Problem besteht darin, dass Ihr Callback asynchron ausgeführt wird und außerhalb der $ apply() - Schleife liegt. Versuchen Sie, Ihre $ apply von start() zu verschieben, wo Sie die Daten in $ scope.register speichern. –

+0

@MattW Ich habe deine Empfehlung und es funktioniert. der Teil, wo ich die Werte zuweisen, ist umgeben von $ scope. $ apply und ich habe $ scope. $ digest aus dem Skript entfernt. Ich denke, das ist eine bessere Lösung, weil ich unnötigen Code entfernt habe. – ViROscar

+0

Freut mich zu hören. Ich würde untersuchen, wie Angular Objekte beobachtet - es gibt mehrere Methoden, die es verwenden kann. Ich denke, dass dies wahrscheinlich ein Randfall ist, in dem Angular die falsche Methode basierend auf Ihrer ng-Modell-Methode wählt. Sie könnten auch mit einem $ scope. $ Watch oder $ watchCollection statt mit einem $ digest experimentieren, da es möglicherweise schneller ist. –

Verwandte Themen