Valori $ scope in AngularJS

Question

Ho una breve domanda riguardante i valori degli ambiti e l'assegnazione in AngularJS. Questo probabilmente suonerà un po 'sciocco, ma sono curioso.

supponendo che sto usando controllerAs sintassi, e il mio esempio controller è ctrl, ho detto, qualcosa, come un modulo con un ingresso in questo modo:

<form name="ctrl.form"> 
<input type="text" ng-model="ctrl.firstName" /> 
</form> 

Perché posso farlo in mio controller:

if(this.form.$valid) { 
    //code... 
} 

Ma non questa:

var form = this.form; 

if(form.$valid) { 
    //code 
} 

La prima esempio funziona, ma il secondo esempio restituisce undefined. Mi manca qualcosa di semplice qui con incarichi variabili? Poiché this.form contiene un valore, perché non è assegnato a form?

Grazie!

Answer 1

EDIT:

ho risolto il problema - la ragione per cui il secondo esempio è stato restituisce undefined era perché le variabili venivano assegnati al di fuori della forma funzione di invio. IE nel contesto completo, qui è tutta la mia file prima di cui mi stavo indefinito:

(function() { 
'use strict'; 

//signup controller definition 
var SignupCtrl = function($http, $q, User, FormTools) { 

    var firstName = this.firstName, 
     lastName = this.lastName, 
     password = this.password, 
     form  = this.signupForm;   


    function submitRegistration() { 

     //check if the form is valid 
     if(form.$valid) { 
      console.log("valid"); 
      var user = { 
       firstName: firstName, 
       lastName: lastName, 
       password: password 
      }; 

      User.createUser(user) 
      .then(function(response) {    
       console.log('user saved!');    
      }, function(err) {    
       console.error('error, user wasn\'t saved. reason: ' + err);    
      }); 
     //if the form isn't valid at all 
     } else { 
      return false; 
     } 
    } 


    this.submitRegistration = submitRegistration; 


}; 


angular 
    .module('signup', []) 

    .config(['$stateProvider', function($stateProvider) { 
     $stateProvider 
      .state('signup', { 
       url: '/signup', 
       //path relative to index.html 
       templateUrl: 'modules/signup/signup.html', 
       controllerAs: 'signup', 
       controller: 'SignupCtrl' 
      }); 
    }]) 

    .controller('SignupCtrl', [  
     '$http', 
     '$q', 
     'User', 
     'FormTools',   
     SignupCtrl 
    ]); 

})(); 

La funzione submitRegistration era stato chiamato sulla forma presentare nella mia forma:

<form ng-submit="signup.submitRegistration()" id="signup-form" name="signup.signupForm" novalidate> 

sto indovinando che le variabili per quanto riguarda il modulo (ad esempio this.firstName, this.lastName, ecc.) erano undefined fino a quando viene chiamata la funzione di invio. Per rimediare a questo, ho solo scambiato dove stavo assegnando le variabili:

(function() { 
'use strict'; 

//signup controller definition 
var SignupCtrl = function($http, $q, User, FormTools) { 

    function submitRegistration() { 

     var firstName = this.firstName, 
      lastName = this.lastName, 
      password = this.password, 
      form  = this.signupForm; 

     //check if the form is valid 
     if(form.$valid) { 
      console.log("valid"); 
      var user = { 
       firstName: firstName, 
       lastName: lastName, 
       password: password 
      }; 

      User.createUser(user) 
      .then(function(response) {    
       console.log('user saved!');    
      }, function(err) {    
       console.error('error, user wasn\'t saved. reason: ' + err);    
      }); 
     //if the form isn't valid at all 
     } else { 
      return false; 
     } 
    } 


    this.cool = function() { 
     console.dir(this.signupForm); 
    }; 

    this.submitRegistration = submitRegistration; 

    this.sayHello = User.sayHello; 

}; 


angular 
    .module('signup', []) 

    .config(['$stateProvider', function($stateProvider) { 
     $stateProvider 
      .state('signup', { 
       url: '/signup', 
       //path relative to index.html 
       templateUrl: 'modules/signup/signup.html', 
       controllerAs: 'signup', 
       controller: 'SignupCtrl' 
      }); 
    }]) 

    .controller('SignupCtrl', [  
     '$http', 
     '$q', 
     'User', 
     'FormTools',   
     SignupCtrl 
    ]); 

})(); 

Ora che le variabili sono stati spostati nel campo di applicazione funzione locale, funziona. Immagino che il controllore non abbia accesso a quelle variabili fino a quando il modulo non sarà presentato, ma potrei sbagliarmi.

PS: Nel caso in cui ti stia chiedendo perché definisco la mia funzione di controller al di fuori di .controller(), trovo che sia più facile eseguire il debug perché in caso di eccezioni avrò una funzione con nome nella mia traccia di stack invece di una anonima.

Grazie!