2016-03-15 137 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也是如此。