VAR VS此VS $範圍在AngularJS（1.4）

Question

您好我正在學習的角度也失去了我的腦海理解之間'變種' 的區別，'這個'和'$範圍'。
雖然我讀了這個link但它超出了我的頭。
當我使用ng-controller="myController as ctrl"時，我只能訪問這個上設置的變量和函數。
雖然定義ng-controller="myController"我只能訪問$ scope上設置的變量和函數。
有人可以深入解釋這個話題嗎？

Answer 1

關鍵字var是純粹的JavaScript，只是你如何在javascript中聲明變量。像這樣：

var myName = 'Nikolaj'; 
var myAge = 1700; 
// etc. 

如果你不熟悉var你應該冒險進入前角學習JavaScript，因爲角度的學習曲線，可以說是相當陡峭的開始。

這樣說我會試着解釋其他的概念。

使用controllerAs

當使用推薦controllerAs語法，你在你的模板控制器實例的引用。這是使用<div ng-controller="myController as ctrl"></div>時會發生的情況;

您的控制器基本上是「新的」，並存儲在一個名爲ctrl的變量中，該變量通過角度在模板中可用。這允許您訪問控制器成員（公共函數和變量）的模板是這樣的：

<div ng-controller="myController as ctrl"> 
    <p>{{ctrl.name}}</p> 
</div> 

爲了使變量name在模板可用，首先必須聲明爲public成員/你的控制器的變量。這正是this關鍵字發揮作用的地方。當你創建你的控制器，使變量name公衆，你會做這樣的：

angular.module('app').controller('myController', function(){ 
    this.name = 'My name variable'; 
}); 

這裏this是在Javascript中一個特殊的概念，那就是函數上下文的引用 - 但只是基本的JavaScript。

使用$範圍

當你改用您的控制器是這樣的：<div ng-controller="myController"></div>你沒有在你的模板直接訪問控制器實例。相反，每次在角度表達式中使用某些東西時，例如{{name}}，Angular隱含地假定變量name存在於$ scope變量上。鏈接到模板時，每個控制器都有一個$ scope變量。要訪問您的控制器體內這個變量，你會喜歡這個訪問：

angular.module('app').controller('myController', function($scope){ 
    $scope.name = 'My name variable'; 
}); 

---

之所以controllerAs建議語法，因爲使用$範圍時，在某種程度上，它可以當你有多個嵌套的作用域（即嵌套控制器）時，很難確定你指的是哪個作用域。如本例：

<div ng-controller="FirstController"> 
    <h1>{{firstControllerVariable}}</h1> 
    <div ng-controller="SecondController"> 
     <h2>{{whereDoIBelong}}</h2> 
    </div> 
</div> 

隨着controllerAs語法，這是很清楚哪些變量屬於哪個控制器：

<div ng-controller="FirstController as first"> 
    <h1>{{first.firstControllerVariable}}</h1> 
    <div ng-controller="SecondController as second"> 
     <h2>{{second.iKnowWhereIBelong}}</h2> 
    </div> 
</div> 

另一個原因是使用controllerAs語法是因爲它會更容易遷移到ES2016及以上。