Angularjs ng-show basato sulla richiamata

Question

Sono nuovo per l'angolare, quindi forse mi manca qualcosa.

Nel mio modulo di registrazione ho bisogno di una posizione da parte dell'utente. A seconda che autorizzano/supportano navigator.geolocation, voglio mostrare un menu a tendina per scegliere una posizione.

Controller.

$scope.showLoc = true; 
if(navigator && navigator.geolocation){ 
    navigator.geolocation.getCurrentPosition(function(pos){ 
     $scope.showLoc = false; 
    },function(err){ 
     $scope.showLoc = true; 
    }); 
} 

e la mia forma:

<form class="form-horizontal" name="register" ng-controller="RegisterCtrl" ng-submit="registerUser()"> .... 
<div ng-show="showLoc" accesskey=""> 
    test 
</div> 
.... 
</form> 

Questo approccio non funziona per me. Qualsiasi intuizione sarebbe apprezzata.

Answer 1

Ogni volta che si esegue una qualche operazione al di fuori di angularjs, ad esempio una chiamata ajax con jquery o l'acquisizione della geolocalizzazione come nell'esempio qui, è necessario consentire a angular sapere di aggiornarsi. Ho guardato il tuo jsfiddle e cambiato un po 'del vostro codice intorno a questo aspetto:

var app = angular.module('myApp', []); 
app.controller('RegisterCtrl',function($scope){ 
    $scope.showLoc = false; 
    navigator.geolocation.getCurrentPosition(function(pos){ 
      $scope.showLoc = true; 
      $scope.$apply(); 
     },function(err){   
      $scope.showLoc = false; 
      $scope.$apply();    
     }); 
}); 

E ora showLoc modifiche su true l'aggiornamento. Ecco il Documation sull'uso del $ applicare() metodo http://docs.angularjs.org/api/ng.$rootScope.Scope#$apply

jsFiddlehttp://jsfiddle.net/yLFNP/6/

Edit: La mia risposta è stata curata, ma io non sono d'accordo con la modifica. Mentre potresti racchiudere il metodo $ apply attorno a $ scope.showLoc = false per renderlo "più corto" Stai salvando solo 1 carattere (il punto e virgola). Inoltre, tendo ad apprezzare il metodo $ apply dopo un po 'di logica invece di avvolgere tutto in esso. Se ci fossero più cose che stavo facendo al campo di applicazione, che ci sia bisogno di scrivere ogni un ulteriore in questo modo:

$scope.$apply($scope.var1 = newValue1); 
$scope.$apply($scope.var2 = newValue2); 
$scope.$apply($scope.var2 = newValue3); 

Il che sembra eccessivo, o è possibile utilizzare il metodo della funzione:

$scope.$apply(function(){ 
    $scope.var1 = newValue1; 
    $scope.var2 = newValue2; 
    $scope.var3 = newValue3; 
}); 

O direttamente dopo il codice che ha bisogno di "applicare":

$scope.var1 = newValue1; 
$scope.var2 = newValue2; 
$scope.var3 = newValue3; 
$scope.$apply(); 

facendo in questo metodo per tutto il tempo, sei il codice è facilmente trasferibile e molto leggibile. Anche meno linee non è sempre il metodo migliore.