AngularJS |范围scope用法详解 _rootScope

AngularJS中的范围是HTML视图和JavaScript控制器的绑定部分。当你将属性添加到JavaScript控制器中的作用域对象中时, 只有HTML视图可以访问这些属性。 AngulerJS中有两种类型的范围。

$Scope
$rootScope

范围：Scope中的一些特定功能如下所列

HTML视图
当前视图(称为模型)可用的数据
制作/更改/删除/控制数据的JavaScript函数称为Controller。

【AngularJS |范围scope用法详解】语法如下：

$scope

范例1：此示例将更清楚地说明范围概念, 此示例包含单个范围。

< !DOCTYPE html> < html > < head > < title > AngularJS | Scope < / title > < script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" > < / script > < / head > < body > < div ng-app = "gfg" ng-controller = "control" align = "center" > < h1 style = "color:green; " > {{organization}}< / h1 > < p > A Computer Science Portal< / p > < / div > < script > var geeks = angular.module('gfg', []); geeks.controller('control', function($scope) { $scope.organization = "lsbin"; }); < / script > < / body > < / html >

输出如下：

文章图片
范例2：在上面的示例中, 在下面的示例中只有一个范围, 你将看到多个范围。

< !DOCTYPE html> < html > < head > < title > AngularJS | Scope < / title > < script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" > < / script > < / head > < body > < div ng-app = "gfg" ng-controller = "control" > < ul > < li ng-repeat = "x in names" > {{x}}< / li > < / ul > < / div > < script > var geeks = angular.module('gfg', []); geeks.controller('control', function($scope) { $scope.names = ["Python", "Machine Learning", "Artificial Inteligence"]; }); < / script > < / body > < / html >

输出如下：

文章图片
rootScope：
如果变量在rootscope和当前作用域中都包含相同的名称, 则控制器或应用程序将使用当前作用域。
语法如下：

$rootScope

范例3：本示例将向你展示如果变量名称在控制器范围和rootscope中相同, 将会发生什么。

< !DOCTYPE html> < html > < head > < title > AngularJS | Scope < / title > < script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" > < / script > < / head > < body ng-app = "gfg" > < h1 > lsbin< / h1 > < p > Jack and Jones< / p > < h3 > {{relation}}< / h3 > < div ng-controller = "control" > < p > Akbar and Antony < / p > < h3 > {{relation}}< / h3 > < / div > < p > Jay and Viru< / p > < h3 > {{relation}}< / h3 > < script > var geeks = angular.module('gfg', []); geeks.run(function($rootScope) { $rootScope.relation = 'friend'; }); geeks.controller('control', function($scope) { $scope.relation = "brothers"; }); < / script > < / body > < / html >

输出如下：