AngularJS Scope与rootScope理解与区别
来源:互联网 发布:win8网络连接受限 编辑:程序博客网 时间:2024/05/24 03:43
Scope 概述
AngularJS 应用组成如下:
- View(视图), 即 HTML。
- Model(模型), 当前视图中可用的数据。
- Controller(控制器), 即 JavaScript 函数,可以添加或修改属性。
scope 是模型。
scope 是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用。
AngularJS 实例
如果你修改了视图,模型和控制器也会相应更新:
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>我的名字是 {{name}}</h1>
</div>
<script>
<input ng-model="name">
<h1>我的名字是 {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Dow";
});
app.controller('myCtrl', function($scope) {
$scope.name = "John Dow";
});
</script>
RootScope概述
所有的应用都有一个 $rootScope,它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值,可以在各个 controller 中使用。
AngularJS 实例
创建控制器时,将 $rootScope 作为参数传递,可在应用中使用:
<div ng-app="myApp" ng-controller="myCtrl"><h1>{{lastname}} 家族成员:</h1><ul> <li ng-repeat="x in names">{{x}} {{lastname}}</li></ul></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope, $rootScope) { $scope.names = ["Emil", "Tobias", "Linus"]; $rootScope.lastname = "Refsnes";});</script>
RootScope与Scope的区别
上边提到RootScope定义的值可以在各个Controller中使用,这就是它与Scope的主要区别,Scope定义的值只能在其所在的Controller中使用。
AngularJS 实例
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
<p>myCtrl中可以显示使用$rootScope定义的lastname的值:{{lastname}}</p>
<p>myCtrl中不可以显示使用$scope定义的names2的值:{{names2[0]}}</p>
</div>
<div ng-controller="myCtrl2">
<ul>
<li ng-repeat="x in names2">{{x}}</li>
</ul>
<p>myCtrl2中也可以显示使用$rootScope定义的lastname的值:{{lastname}}</p>
<p>myCtrl2中也不可以显示使用$scope定义的names的值:{{names[0]}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$rootScope) {
$scope.names = ["Emil", "Tobias", "Linus"];
$rootScope.lastname = "Refsnes";
});
app.controller('myCtrl2', function($scope) {
$scope.names2 = ["Emil2", "Tobias2", "Linus2"];
});
</script>
</body>
</html>
阅读全文
0 0
- AngularJS Scope与rootScope理解与区别
- angularjs中scope与rootscope 区别
- angularjs scope rootscope 区别
- AngularJS进阶(二十一)Angularjs中scope与rootscope区别及联系
- AngularJS中的$rootScope和$scope的结构与关系
- 作用域 scope 与rootscope
- $scope, $rootScope区别
- angularjs中的$scope和$rootScope
- Angularjs中scope与$scope
- AngularJS的#rootScope和$scope的作用
- 理解angular中$rootscope和$scope
- scope rootScope
- spring的scope理解与自定义scope
- AngularJS 深入理解 $scope
- AngularJS 深入理解 $scope
- AngularJS 深入理解 $scope
- AngularJS 深入理解 $scope
- AngularJS深入理解$scope
- item、nameItem的区别
- Ajax
- 查看maven引入的某个jar的依赖项
- 如何创建一个Analytics Framework的服务
- TextView+ToggleButton
- AngularJS Scope与rootScope理解与区别
- 百度地图实现 右键map,marker出现菜单
- GitHub上传文件大小设置
- 代码代码
- jQuery在某个标签的html代码后面,添加一些html代码?
- 量化交易之羊驼算法在python中的实现
- optee中的fiq的执行
- java中的接口和抽象类
- 端口/URG&PSH/TCP定时器/TCP的三次握手及四次挥手