AngularJS 范围的重要性

示例

由于Angular使用HTML扩展网页并使用普通Javascript添加逻辑,因此使用ng-app,ng-controller和一些内置指令(例如ng-if,ng-repeat等)可以轻松创建网页。使用新的controllerAs语法,Angular用户的新手可以将函数和数据附加到其控制器上,而不必使用$scope。

但是,迟早要弄清楚这到底$scope是什么很重要。它会不断出现在示例中,因此有一些理解很重要。

好消息是,这是一个简单而强大的概念。

创建以下内容时:

<div ng-app="myApp">

 <h1>Hello {{ name }}</h1>

</div>

名字住哪里?

答案是Angular创建了一个$rootScope对象。这只是一个普通的Javascript对象,因此name是该$rootScope对象的属性:

angular.module("myApp", [])

  .run(function($rootScope) {

    $rootScope.name = "World!";

  });

就像Java语言中的全局作用域一样,将项目添加到全局作用域或中通常不是一个好主意$rootScope。

当然,大多数时候,我们创建一个控制器并将所需的功能放入该控制器中。但是,当我们创建一个控制器时,Angular确实很神奇,并$scope为该控制器创建了一个对象。有时将其称为本地范围。

因此,创建以下控制器:

<div ng-app="myApp">

  <div ng-controller="MyController">

    <h1>Hello {{ name }}</h1>

  </div>

</div>

将允许通过$scope参数访问本地范围。

angular.module("myApp", [])

  .controller("MyController", function($scope) {

    $scope.name = "本地先生!";

  });

没有$scope参数的控制器可能出于某种原因根本不需要它。但是重要的是要认识到,即使使用controllerAs语法,也存在局部作用域。

就像$scopeJavaScript对象一样,Angular神奇地将其设置为原型继承自$rootScope。就像您可以想象的那样,可以有一系列作用域。例如,您可以在父控制器中创建模型,然后将其附加到父控制器的作用域$scope.model。

然后,通过原型链,子控制器可以使用本地访问同一模型$scope.model。

最初,这些都不是显而易见的,因为只是Angular在后台执行其魔术。但是理解$scope是了解Angular如何工作的重要一步。

以上是 AngularJS 范围的重要性 的全部内容, 来源链接: utcz.com/z/334595.html

回到顶部