angular作用域分析
angualr作用域 Scope
控制器作用域的继承特性Ⅰ
- 绑定的数据是变量
- 单向隔离（兄弟之间互不影响，父子之间单向继承）
- 父级控制器的数据绑定会影响到子级控制器
- 前提是子控制器内没有绑定数据
- 单向原理：当我们改变子控制器数据时，其会在子控制器内部动态添加`$scope.name='XXX'`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body ng-app="myApp">
<div ng-controller="myCtr">
<input type="text" ng-model="name">
<div ng-controller="myCtr1">
<input type="text" ng-model="name">
</div>
<div ng-controller="myCtr2">
<input type="text" ng-model="name">
</div>
</div>
<script src="angular.min.js"></script>
<script>
var app = angular.module("myApp", [])
app.controller('myCtr', ["$scope",function($scope){
$scope.name ='scale'
}]);
app.controller('myCtr1', ["$scope",function($scope){
}]);
app.controller('myCtr2', ["$scope",function($scope){
}]);
</script>
</body>
</html>
控制器作用域的继承特性Ⅱ
- 绑定的数据是对象
- 双向影响（父级影响子级，子级影响父级）
- 双向原理：其会找子作用域有没有对象类型数据绑定，若没有，找父级，找到后在原有对象数据上动态添加`$scope.name={title:'XXX'}`，从而再次影响子级
- 不像变量，会直接在子作用域添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body ng-app="myApp">
<div ng-controller="myCtr">
<input type="text" ng-model="name.title">
<div ng-controller="myCtr1">
<input type="text" ng-model="name.title">
</div>
<div ng-controller="myCtr2">
<input type="text" ng-model="name.title">
</div>
</div>
<script src="angular.min.js"></script>
<script>
var app = angular.module("myApp", [])
app.controller('myCtr', ["$scope",function($scope){
$scope.name ={title: 'scale'}
}]);
app.controller('myCtr1', ["$scope",function($scope){
}]);
app.controller('myCtr2', ["$scope",function($scope){
}]);
</script>
</body>
</html>
scope:true; scope:false; scope:{}
- scope:true,自定义指令不会影响父作用域，即：有自己的作用域与外隔离，单向继承，默认为false,双向影响
- scope:{} 完全隔离，互不影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body ng-app="myApp">
<div ng-controller="myCtr">
<input type="text" ng-model="name">
<div ng-controller="myCtr1">
<input type="text" ng-model="name">
</div>
<div ng-controller="myCtr2">
<input type="text" ng-model="name">
</div>
<div my-title></div>
</div>
<script src="angular.min.js"></script>
<script>
var app = angular.module("myApp", [])
app.controller('myCtr', ["$scope",function($scope){
$scope.name = 'scale';
}]);
app.controller('myCtr1', ["$scope",function($scope){
}]);
app.controller('myCtr2', ["$scope",function($scope){
}]);
app.directive('myTitle', function(){
return {
restrict: 'EA',
template: '<input type="text" ng-model="name">',
scope: true //scope:true,自定义指令不会影响父作用域，即：有自己的作用域与外隔离，单向继承（父影响子），默认为false,双向影响
}
});
</script>
</body>
</html>
(@ 、= 、&)
- （@）单向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body ng-app="myApp">
<div ng-controller="myCtr">
<input type="text" ng-model="color">
<h1 my-title color="{{color}}"></h1>
</div>
<script src="angular.min.js"></script>
<script>
var app = angular.module("myApp", [])
app.controller('myCtr', ["$scope",function($scope){
$scope.name='德玛西亚';
$scope.color="red"
}]);
app.directive('myTitle', function(){
return {
restrict: 'EA',
template: '{{color}}<span style="color:{{color}}">德玛西亚</span><input type="text" ng-model="color">',
scope: {color:'@color'} //通过（@）号实现指令与控制器单向数据绑定
}
});
</script>
</body>
</html>
- (=)双向数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body ng-app="myApp">
<div ng-controller="myCtr">
<input type="text" ng-model="name">
<h1 my-title color="name"></h1>
</div>
<script src="angular.min.js"></script>
<script>
var app = angular.module("myApp", [])
app.controller('myCtr', ["$scope",function($scope){
$scope.name='red';
}]);
app.directive('myTitle', function(){
return {
restrict: 'EA',
template: '<span style="color:{{color}}">德玛西亚</span><input type="text" ng-model="color">',
scope: {color:'=color'} //通过（=）号实现指令与控制器双向数据绑定
}
});
</script>
</body>
</html>
- (&)调用父作用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body ng-app="myApp">
<div ng-controller="myCtr">
<h1 my-title color="callback()"></h1>
</div>
<script src="angular.min.js"></script>
<script>
var app = angular.module("myApp", [])
app.controller('myCtr', ["$scope",function($scope){
$scope.callback = function () {
return '德玛西亚';
}
}]);
app.directive('myTitle', function(){
return {
restrict: 'EA',
template: '<h3>{{color()}}</h3>',
scope: {color:'&color'} //通过&符号调用父作用
}
});
</script>
</body>
</html>
angular作用域分析的更多相关文章
- angular代码分析之异常日志设计
angular代码分析之异常日志设计 错误异常是面向对象开发中的记录提示程序执行问题的一种重要机制,在程序执行发生问题的条件下,异常会在中断程序执行,同时会沿着代码的执行路径一步一步的向上抛出异常,最 ...
- Kotlin扩展作用域分析与扩展的根本作用解析
在上一次https://www.cnblogs.com/webor2006/p/11219358.html学习了Kotlin的扩展,继续这个话题继续拓展,首先提出这么一个问题:假如我们扩展的方法跟类中 ...
- Angular作用域的层级概念(scope)
首先引入 angular 的根作用域:$rootScope ng-app:定义了angualr的作用域 ng-controller:定义了控制器 $scope定义了视图与控制器之间的纽带,而scope ...
- 对于(function(){}())和function(){}实例的作用域分析（里面有很多问题……）
今天在群里看到一个问题,让我纠结了好一会.下面是我的分析,感觉里面还有很多问题,关于作用域还是不太理解,希望大家看到问题第一时间反馈给我,看到实在受不了的地方说几句都没关系,谢谢. 请看题: 1.对象 ...
- Angular——作用域
基本介绍 应用App是无法嵌套的,但是controller是可以嵌套的,每个controller都会对应一个模型(model)也就是$scope对象,不同层级的controller下的$scope遍产 ...
- Ext.onReady(function(){} )函数的作用域分析(1)
Ext.onReady(function(){ var genResultDelete = function(){ alert('delete') ; } var renderResult = fun ...
- Angular开发者指南（六）作用域
什么是作用域? 作用域是引用应用程序模型的对象. 它是表达式的执行上下文. 作用域以层次结构排列,模仿应用程序的DOM结构,它可以观察表达式和传播事件. 作用域的特征 Scope提供API($watc ...
- AngularJS讲义 - 作用域
什么是作用域? Angular中作用域(scope)是模板以及工作的上下文环境,作用域中存放了应用模型和视图相关的回调行为.作用域是层次化结构的与相关联的DOM结构相对应.作用域可以观察表达式以及传播 ...
- angularjs源码分析之：angularjs执行流程
angularjs用了快一个月了,最难的不是代码本身,而是学会怎么用angular的思路思考问题.其中涉及到很多概念,比如:directive,controller,service,compile,l ...
随机推荐
- python之路径导入
问题: 最近在学习import的时候,发现不像import xxx,或者from xxx import ooo 这样简单.比如,看下面这个图: 要导入才能在te.py调用pre.tab.py?? 直接 ...
- 我的第一个React Native App
我用了三天时间实现了一个相对比较完整的React Native 新闻发布类型的示例.应用做得很简单,但大多React Native的组件都有用到,今天做一个分享(由于我电脑是Windows系统,所以只 ...
- [css]我要用css画幅画(七) - 哆啦A梦
接着之前的[css]我要用css画幅画(六),今天画的有所不同,画的是哆啦A梦,我们小时候对他的称呼其实是小叮当机器猫. (PS:这次我要做的事情,很多人已经做过,这并不是什么创新,我只是在学习并记录 ...
- Windows 10 IoT Serials 3 - Windows 10 IoT Core Ardunio Wiring Mode
Maker社区和智能硬件的朋友一定知道Arduino,很多3D打印机都是用它做的.为了迎合这一大块市场,微软在基于Intel Galileo的Windows 8.1 IoT中就是使用这种基于Ardui ...
- RESTORE detected an error on page (0:0) in database
在测试服务器还原生产服务器的一个数据库时遇到了下面错误: System.Data.SqlClient.SqlError: RESTORE detected an error on page (0:0) ...
- 写了一个常规性生成merge 的小脚本
现在使用数据库来写存储过程,动不动参数就会用到xml ,当然罗,优势也很明显,参数相对固定,而且灵活,如果要修改或者什么的,中间接口层也不需要做变化,只需要修改封装的存储过程以及程序传参就ok了. 随 ...
- 程序员的修养 -- 如何写日志(logging)
在程序中写日志是一件非常重要,但是很容易被开发人员忽视的地方.写好程序的日志可以帮助我们大大减轻后期维护压力. 在实际的工作中,开发人员往往迫于的巨大时间压力,而写日志又是一个非常繁琐的事情,往往 ...
- Linux 脚本编写基础
txt去重 http://man.linuxde.net/sort Linux 脚本编写基础 http://www.cnblogs.com/linn/archive/2007/03/05/664 ...
- Linux下部署docker记录（1）-Volume使用
之前部署了Linux下部署docker记录(0)-基础环境安装,接下来看看Docker Volume的使用. Docker volume使用1)一个数据卷是一个特别指定的目录,该目录利用容器的UFS文 ...
- Ubuntu14.04下配置固定IP
实验室需要构建静态网站作为个人知识管理工具,每个人要求都有属于自己的静态网站进行知识积累和交流.但是实验室的路由有时候会关闭,重启后给每台机器重新分配ip,因此为了方便访问每台主机,需要设置静态ip. ...