AngularJSのスコープ値

Question

AngularJSのスコープ値と割り当てに関する質問があります。これはおそらく少し馬鹿に聞こえるが、私はそれについて興味がある。

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

は、なぜ私は私のコントローラでこれを行うことができます：

私は controllerAs構文を使用していますし、私のコントローラインスタンスは ctrlで、私はこのような入力を持つフォームのように、何かを言うていると仮定すると、

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

ではなく、この：

var form = this.form; 

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

最初例は機能しますが、2番目の例はundefinedを返します。私は変数の割り当てでここに単純なものがありませんか？ this.formには値が保持されているので、formに割り当てられないのはなぜですか？

ありがとうございます！

Answer 1

EDIT：

私はこの問題を解決した - 変数は、フォーム送信関数の外に割り当てられていたため、2番目の例では、undefinedを返したことが理由でした。私は変数ことを推測してい

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

：submitRegistration機能は、私の形で提出フォームに呼び出された

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

})(); 

：完全なコンテキストでのIEは、ここで私は未定義なった場所の前に私の全体のファイルですフォーム（すなわち、this.firstName、this.lastNameなど）は、submit関数が呼び出されるまでundefinedでした。私は、変数を割り当てたところこの問題を解決するために、私はちょうどスワップ：

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

})(); 

今変数はローカル関数スコープに移動したこと、それが動作します。私は、フォームが提出されるまで、コントローラがそれらの変数にアクセスすることはできないと推測していますが、それは間違っている可能性があります。

PS：コントローラの機能を.controller()の外に定義するのはなぜかと思うのですが、例外が発生した場合、匿名のものではなくスタックトレースにデバッグするのが簡単です。

ありがとうございます！