angularjs中$scope是什么意思

JavaScript014

angularjs中$scope是什么意思,第1张

Scope(作用域)是angular应用程序中视图(HTML)和控制器(JavaScript)之间的纽带。

也就是说HTML和JavaScript可以通过它来传输、共享数据。Scope是一个对象,有自己的很多的方法和属性,$scope正是创建控制器时传递的Scope对象的一个实例。

延伸知识点:我们知道创建控制器时传递了Scope对象的一个实例,所以一个控制器对应一个Scope对象,在多个控制器之间共享数据怎么办?多个控制器若属于同一个APP,我们可以用$rootScope来实现控制器间的数据共享

一句话总结:

$rootScope针对全局的作用域生效

$scope只针对当前的controller作用域生效

用下面的例子来证明上述的说法:

定义一个模块名为myApp

var myApp = angular.module('myApp', [])

创建oneController和twoController这两个controller

oneController传入$scope和$rootScope

myApp.controller('oneController', ['$scope', '$rootScope', function ($scope, $rootScope) {

// 局部的变量,只有在oneController中才会显示

$scope.one_language = 'Python'

// 全局的变量,都可以调用

$rootScope.language = 'Go'

}])

twoController只传入$scope

myApp.controller('twoController', ['$scope', function ($scope) {

// 局部的变量,只有在twoController中才会显示

$scope.two_language = 'Java'

}])

HTML标签内容

<span ng-app="myApp">

<style>

div{margin-top: 15pxborder: 2px solid rebeccapurplewidth: 400px}

</style>

<div>

<h3>我是全局变量language: {{ language}}</h3>

</div>

<div ng-controller="oneController">

<h3>我是one_language局部变量: {{ one_language}}</h3>

</div>

<div ng-controller="twoController">

<h1>twoController</h1>

<h3>我是two_language局部变量: {{ two_language }}</h3>

<h3>我是one_language局部变量: {{ one_language}}</h3>

<h3>我是全局变量language: {{ language }}</h3>

</div>

</span>