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