2016-03-15 135 views
1

我想了解JavaScript範圍和Angularjs範圍之間的區別。當我在網上搜索和在我發現範圍JavaScript有兩個範圍:全球和本地他們提到變量但在角$範圍是應用程序對象我不明白可以有人幫我一些例如什麼是範圍.....我想知道範圍是否只有兩個字是相同的含義爲兩種技術都不同好心給我解釋一下JavaScript範圍和角度js範圍有什麼不同

感謝

+2

他們是完全不同的事情,但在相關的工作方式。我不確定如何進行比較,而不會進一步混淆問題。你需要學習三件事:Javascript範圍如何工作,如何工作; '$ scope'對象如何在Angular中工作; Angular模板如何與'$ scope'對象交互。 – deceze

+0

我從JavaScript中的在線範圍明白是什麼變量是正確的還是我的理解是錯誤的 – Mahadevan

+0

這是非常好,在角文檔 – charlietfl

回答

4

的JavaScript

JavaScript中的範圍是特定代碼可以訪問的變量。它包含當前函數中的變量,任何包含函數中的變量以及所有全局變量。

例如這裏是一個簡單的JavaScript,顯示一些變量,這些變量,並且在範圍爲特定的代碼:

<script type="text/javascript"> 
    var a = 1; // in scope 

    function W() { 
     var b = 2; // not in scope 
    } 

    function X() { 
     var c = 3; // in scope 

     function Y() { 
      var d = 4; // not in scope 
     } 

     function Z() { 
      var e = 5; // in scope 

      // here is my code 
      // it has access to a, c, and e 
      a = c + e; 
     } 

    } 
</script> 

在功能Z的代碼可以訪問變量ac,和e,但不是bd

AngularJS

AngularJS實現MVC Pattern的變型。 $scope變量是模式的「模型」部分。您分配給$scope的屬性成爲使用範圍的HTML可見的變量。

例如,考慮這個簡單的例子:

app.controller('MyController', function ($scope) { 
    $scope.message = 'Hello Cleveland!'; 
} 

<div ng-controller="MyController"> 
    <span>{{message}}</span> 
</div> 

分配控制器$scope.message,它是可見的如HTML message

Angular中的範圍在JavaScript中的範圍也類似於範圍,因爲它們從父母繼承。在Angular中,應用程序中的所有$scope都繼承自$rootScope。每個控制器都會創建一個作爲根作用域子項的新作用域,而子作用域通常由指令創建。例如,ng-if指令創建一個子範圍。

app.controller('MyController', function ($scope) { 
    $scope.message = 'Hello Cleveland!'; 
    $scope.show = true; 
} 

<div ng-controller="MyController"> 
    <div ng-if="show"> 
     <span>{{message}}</span> 
    </div> 
</div> 

在這個例子中,span實際上是由ng-if創建子範圍,但它仍然可以訪問message屬性,因爲它繼承了它從其父。

同樣,您可以有不交互的兄弟範圍。

例如,假設你有兩個控制器, 「CTRL1」 和 「CTRL2」:

app.controller('Ctrl1', function ($scope) { 
    $scope.message = 'This controller is #1'; 
} 
app.controller('Ctrl2', function ($scope) { 
    $scope.message = 'This is the second controller'; 
} 

<div ng-controller="Ctrl1"> 
    <span>{{message}}</span> 
</div> 
<div ng-controller="Ctrl2"> 
    <span>{{message}}</span> 
</div> 

message變量是在每一個不同的,因爲在二者之間沒有繼承關係。

差異

有範圍在JavaScript和角行爲之間的一個顯著差異。此行爲是由於以下事實:Angular中的作用域使用prototypical inheritance。目前已經寫了這個已經很多了,所以我不會去太多的細節,但需要記住的重要事情是這樣的:

在兒童範圍更改變量不影響同在父範圍內命名的變量。

每個子範圍都有效地獲得了所有繼承屬性的副本。當子範圍修改它時,它只會修改它的副本,而不是父級的副本。

這不是在JavaScript的情況。在第一個例子中,Z功能分配一個值到全局a變量。所有代碼都可以看到此更改。 Angular也是如此。