コントローラで変数が定義されていないのはなぜですか？

Question

私のコントローラコードは、関数init（）が実行されると直ちに、this.customersに対してundefinedを返します。

myApp.controller('OrdersController',['$routeParams', function ($routeParams) { 
var customerId = $routeParams.customerId; 
this.orders = null; 


this.customers = [ 
    {joined: '2012-12-03', name: 'Amit', city: 'Delhi', orderTotal: 34.53,orders: [{id:1,product:'shoes',total:'34.53'}]}, 
    {joined: '1995-04-24', name: 'Ravi', city: 'Mumbai',orderTotal: 45.34,orders: [{id:2,product:'socks',total:'53.51'}]}, 
    {joined: '2003-03-21', name: 'Flish', city: 'Lonavla', orderTotal: 134.323,orders: [{id:3,product:'books',total:'43.55'}]}, 
    {joined: '2003-10-14', name: 'Meahe', city: 'Pune', orderTotal: 12.33,orders: [{id:4,product:'eraser',total:'12.33'}]} 
]; 

function init() { 
    console.log('infunc',this.customers); 
    //search the customers for customerId 
    for(var i=0; i < this.customers.length; i++){ 
     if(this.customers[i].orders[0].id === parseInt(customerId)) { 
      this.orders = this.customers[i].orders; 
     } 
    } 
} 

init(); 

}]); 

Answer 1

それはvar vm = thisその後thisの代わりに使用して定義する方が良いでしょう。

myApp.controller('OrdersController',['$routeParams', function ($routeParams)  { 
var vm = this; 
var customerId = $routeParams.customerId; 
vm.orders = null; 

vm.customers = [ 
    {joined: '2012-12-03', name: 'Amit', city: 'Delhi', orderTotal: 34.53,orders: [{id:1,product:'shoes',total:'34.53'}]}, 
    {joined: '1995-04-24', name: 'Ravi', city: 'Mumbai',orderTotal: 45.34,orders: [{id:2,product:'socks',total:'53.51'}]}, 
    {joined: '2003-03-21', name: 'Flish', city: 'Lonavla', orderTotal: 134.323,orders: [{id:3,product:'books',total:'43.55'}]}, 
    {joined: '2003-10-14', name: 'Meahe', city: 'Pune', orderTotal: 12.33,orders: [{id:4,product:'eraser',total:'12.33'}]} 
]; 

function init() { 
    console.log('infunc',vm.customers); 
    for (var i=0; i < vm.customers.length; i++) { 
     if ($scope.customers[i].orders[0].id === parseInt(customerId)) { 
      vm.orders = vm.customers[i].orders; 
     } 
    } 
} 

    init(); 
}]); 

Answer 2

あなたの質問は基本的にthisと$scopeは必ずしも同じものではないことを説明している、this SO questionによって回答されています。コントローラが作成されると、コントローラはthis、コントローラは$scopeとなります。しかし、関数init()が実際に評価されると、thisは$scopeと同じ意味を持つという保証はありません。いずれにしても、thisを使用して保存されたデータは、いずれのビューでも使用できなくなります。$scopeに保存されたデータのみが使用可能になります。だから、非常に多くの理由のために、あなたがあなたのコードを変更する必要があります

myApp.controller('OrdersController',['$routeParams', function ($routeParams) { 
    var customerId = $routeParams.customerId; 
    $scope.orders = null; 

    $scope.customers = [ 
     {joined: '2012-12-03', name: 'Amit', city: 'Delhi', orderTotal: 34.53,orders: [{id:1,product:'shoes',total:'34.53'}]}, 
     {joined: '1995-04-24', name: 'Ravi', city: 'Mumbai',orderTotal: 45.34,orders: [{id:2,product:'socks',total:'53.51'}]}, 
     {joined: '2003-03-21', name: 'Flish', city: 'Lonavla', orderTotal: 134.323,orders: [{id:3,product:'books',total:'43.55'}]}, 
     {joined: '2003-10-14', name: 'Meahe', city: 'Pune', orderTotal: 12.33,orders: [{id:4,product:'eraser',total:'12.33'}]} 
    ]; 

    function init() { 
     console.log('infunc',this.customers); 
     for (var i=0; i < this.customers.length; i++) { 
      if ($scope.customers[i].orders[0].id === parseInt(customerId)) { 
       $scope.orders = $scope.customers[i].orders; 
      } 
     } 
    } 

    init(); 
}]); 

Answer 3

@Tim BiegeleisenとhadiJzの対応は非常に有用だったとあなたが知る必要があるすべてが含まれているが、私は、一般的なJavascriptの説明で応答の過程にあったし、それを含めるようにしたかったです。角度の要素によって畳み込まれたときに、この単純化された抜粋はthisで私を支援してきました：一般的にJavscriptについて

を、thisは、3つの異なる 方法で結合することができます。 thisは、呼び出された関数のローカルスコープでバインドされています（ はオブジェクトのプロパティではありません）。ファンクションが通常 （たとえばf（））と呼び出された場合、 'this'はグローバルオブジェクトを指します。 がコンストラクタ（つまり、 'new'の一部）として呼び出された場合、 'this' は新しく作成されたオブジェクトを指します。 thisの最後のケースはメソッド呼び出し（たとえばa.f（））です。ここで 'this'はドットの左を評価した結果のオブジェクトを指します。

私は答えを盗もうとしていませんし、間違いなくTimやhadiJzを選択する必要がありますが、これは回答の要素を理解するのに役立ちます。