$ wartości zakresu w AngularJS

Question

Mam krótkie pytanie dotyczące wartości zakresu i przypisania w AngularJS. To prawdopodobnie zabrzmi trochę głupio, ale jestem ciekaw tego.

Zakładając Używam controllerAs składnię, a mój przykład kontroler jest ctrl, muszę powiedzieć, coś, jak postaci z wejściem jak ten:

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

Dlaczego mogę zrobić w moim kontrolera:

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

Ale nie to:

var form = this.form; 

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

pierwszy przykład działa, ale drugi przykład zwraca undefined. Czy brakuje tu czegoś prostego ze zmiennym przydziałem? Ponieważ this.form ma wartość, dlaczego nie jest przypisane do form?

Dzięki!

Answer 1

EDIT:

Mam rozwiązać ten problem - dlatego, że drugi przykład wracał niezdefiniowany dlatego zmienne były przypisywane poza formie przedstawienia funkcji. IE w pełnym kontekście, tu jest mój cały plik przed którym się coraz niezdefiniowany:

(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 
    ]); 

})(); 

Funkcja submitRegistration był nazywany na formularzu złożyć w moim formularzu:

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

Jestem zgadywania, że ​​zmienne w odniesieniu do postaci (tj. this.firstName, this.lastName, itp.) były undefined, dopóki nie zostanie wywołana funkcja submit. Aby temu zaradzić, po prostu zamienione gdzie byłem przypisywania zmiennych:

(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 
    ]); 

})(); 

Teraz, zmienne zostały przeniesione do lokalnej zakres funkcji, to działa. Zgaduję, że kontroler nie ma dostępu do tych zmiennych, dopóki formularz nie zostanie przesłany, ale mogę się mylić.

PS: Jeśli zastanawiasz się, dlaczego definiuję funkcję kontrolera poza .controller(), to łatwiej jest debugować, ponieważ w przypadku wyjątków, będę mieć nazwaną funkcję w moim śledzeniu stosu zamiast anonimowego.

Dzięki!