【AngularJS】—— 12 独立作用域
独立作用域的作用
为了便于理解,先看一下下面这个例子:
<!doctype html> <html ng-app="myApp"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script></head><body><div ng-controller="MainController"><xingoo></xingoo><xingoo></xingoo><xingoo></xingoo></div><script type="text/javascript">var myAppModule = angular.module("myApp",[]);myAppModule.controller('MainController', function($scope){}).directive("xingoo",function(){return {restrict:'AE',template:'<div><input type="text" ng-model="username"/>{{username}}</div><br>'};});</script></body> </html>
可以看到,在script中,创建了一个指令,该指令实现了一个自定义的标签。
标签<xingoo></xingoo>的作用是 替换成 一个输入框和一个数据显示。
这样就会出现下面的效果:
分析:
当我们自己创建某个指令时,这个指令肯定不可能只使用一次,是要重复多次使用的,有的在一个页面内或者一个控制器内需要使用多次。
类似上面的这种场景,在任何一个输入框内改变数据,都会导致其他的标签内的数据一同发生改变,这显然不是我们想要的。
这个时候就需要独立作用域了。
如何实现独立作用域
下面看看独立作用域的效果:
<!doctype html> <html ng-app="myApp"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script></head><body><div ng-controller="MainController"><xingoo></xingoo><xingoo></xingoo><xingoo></xingoo></div><script type="text/javascript">var myAppModule = angular.module("myApp",[]);myAppModule.controller('MainController', function($scope){}).directive("xingoo",function(){return {restrict:'AE',scope:{},//scope=true,template:'<div><input type="text" ng-model="username"/>{{username}}</div><br>'};});</script></body> </html>
只需要在定义指令时,添加scope:{}这个属性,就可以使标签拥有自己的作用域。
仅仅是添加这一行代码而已,就实现了独立作用域。
在进行输入时,每个模板内使用自己的数据,不会相互干扰。
作用域数据绑定
自定义标签或者进行扩展时,会有这样的需求场景,要在标签中添加一些属性,实现一些复杂功能。
关于这些属性,独立作用域是如何的做的呢?看看下面的内容吧。
举个例子:
<xingoo say="name"></xingoo> <xingoo say="name()"></xingoo>
假设传入的是上面这种,我们如何区分它传入的到底是变量呢?还是字符串呢?还是方法呢?
因此AngularJS有了三种自定义的作用域绑定方式:
1 基于字符串的绑定:使用@操作符,双引号内的内容当做字符串进行绑定。
2 基于变量的绑定:使用=操作符,绑定的内容是个变量。
3 基于方法的绑定:使用&操作符,绑定的内容时个方法。
基于字符串的绑定@:
<!doctype html> <html ng-app="myApp"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script></head><body><div ng-controller="MainController"><xingoo say="test string"></xingoo><xingoo say="{{str2}}"></xingoo><xingoo say="test()"></xingoo></div><script type="text/javascript">var myAppModule = angular.module("myApp",[]);myAppModule.controller('MainController', function($scope){$scope.str1 = "hello";$scope.str2 = "world";$scope.str3 = "angular";}).directive("xingoo",function(){return {scope:{say:'@'},restrict:'AE',template:"<div>{{say}}</div>",replace:true};});</script></body> </html>
看一下代码,在body中使用了三次自定义的标签,每种标签的内部有一个say的属性,这个属性绑定了一个双引号的字符串。
在指令的定义中,添加了scope:{say:'@'}这个键值对属性,也就是说,angular会识别say所绑定的东西是一个字符串。
在模板中,使用表达式{{say}}输出say所表示的内容。
可以看到,双引号内的内容都被当做了字符串。当然{{str2}}表达式会被解析成对应的内容,再当做字符串。
基于变量的绑定=:
<!doctype html> <html ng-app="myApp"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script></head><body><div ng-controller="myAppCtrl">ctrl:<input type="text" ng-model="testname"><br>directive:<xingoo name="testname"></xingoo></div><script type="text/javascript">var myAppModule = angular.module("myApp",[]);myAppModule.controller("myAppCtrl",['$scope',function($scope){$scope.testname="my name is xingoo";}]);myAppModule.directive("xingoo",function(){return {restrict:'AE', scope:{name:'='},template:'<input type="text" ng-model="name">',repalce:true}})</script></body> </html>
在上面的代码中,可以看到
1 在控制器myAppCtrl对应的div中,定义了一个变量ng-model —— testname。
2 testname对应的是输入框中输入的值。
3 然后把这个变量当做一个参数传递给xingoo这个标签的name属性。
4 在xingoo标签中,又把这个name绑定到模板中的一个输入框内。
最终两个输入框的内容被连接起来,无论改变哪一个输入框内的值,testname与name都会发生改变。
通过下面这张图可以看出来:
在指令中通过scope指定say绑定规则是变量的绑定方式。
最终通过xingoo标签内的属性依赖关系把 testname与name连接在一起:
基于方法的绑定&:
上面展示了基于字符串和变量的绑定方法,下面看看基于方法的绑定:
<!doctype html> <html ng-app="myApp"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script></head><body><div ng-controller="myAppCtrl"><xingoo say="sayHello(name)"></xingoo><xingoo say="sayNo(name)"></xingoo><xingoo say="sayYes(name)"></xingoo></div><script type="text/javascript">var myAppModule = angular.module("myApp",[]);myAppModule.controller("myAppCtrl",['$scope',function($scope){$scope.sayHello = function(name){console.log("hello !"+ name);};$scope.sayNo = function(name){console.log("no !"+ name);};$scope.sayYes = function(name){console.log("yes !"+ name);};}]);myAppModule.directive("xingoo",function(){return {restrict:'AE',scope:{say:'&'},template:'<input type="text" ng-model="username"/><br>'+'<button ng-click="say({name:username})">click</button><br>',repalce:true}})</script></body> </html>
这段代码中scope中的绑定规则变成了&,也就是方法绑定。
在body中,通过自定义标签传入了三个方法,分别是sayHello(name),sayNo(name),sayYes(name),这三个方法都需要一个name变量。
在指令的定义中,模板替换成一个输入框,一个按钮:
输入框:用于输入username,也就是三个方法需要的参数name。
按钮:点击触发函数——通过绑定规则,绑定到相应的方法。
也就是说
通过say在scope中的定义,angular知道了say对应的是个方法;
通过{name:username}的关联,知道了传入的是username。
从而交给对应的方法执行。
页面效果:
本文转自博客园xingoo的博客,原文链接:【AngularJS】—— 12 独立作用域,如需转载请自行联系原博主。
【AngularJS】—— 12 独立作用域相关推荐
- AngularJS 0005:作用域
angularJS中有一个重要的属性Scope,作用域. web编程中,我们需要获取页面中的某个控件,某个属性,一般我们都用到document或者类似的一个对象来获取整个表单的内容. 在angular ...
- AngularJS 技术总结
学习AngularJS,并且能在工作中使用到,算是很幸运了.因此本篇也会搜集各种资料,进行分享. 书籍分享 AngularJS权威指南 常用链接 AngularJS API文档 AngularJS 用 ...
- 理解AngularJS的作用域Scope
为什么80%的码农都做不了架构师?>>> 理解AngularJS的作用域Scope https://github.com/angu- 08-02 22:45 10-14 09: ...
- AngularJS 作用域与数据绑定机制
AngularJS 简介 AngularJS 是由 Google 发起的一款开源的前端 MVC 脚本框架,既适合做普通 WEB 应用也可以做 SPA(单页面应用,所有的用户操作都在一个页面中完成).与 ...
- AngularJS 初始化加载流程
一.AngularJS 初始化加载流程 1.浏览器载入HTML,然后把它解析成DOM. 2.浏览器载入angular.js脚本. 3.AngularJS等到DOMContentLoaded事件触发. ...
- AngularJS学习笔记(一)
前言 几个月之前了解过一点Angular,主要是通过phonecat应用程序了解一些入门东西,但是当被问及什么是Angular或者你对Angular的理解时,只记得一个MVVM双向数据绑定,显然这是不 ...
- 使用AngularJS 进行Hybrid App 开发已经有一年多时间了,这里做一个总结
一.AngularJS 初始化加载流程 1.浏览器载入HTML,然后把它解析成DOM. 2.浏览器载入angular.js脚本. 3.AngularJS等到DOMContentLoaded事件触发. ...
- AngularJS学习笔记(1) - AngularJS入门
什么是AngularJS? AngularJS是建立在jQuery的一个轻量级版本之上的MVC框架.MVC将业务逻辑代码和视图.模型相分离.AngularJS提供的所有功能都可以通过使用JavaScr ...
- AngularJS Provider/Service/Factory 使用
一.AngularJS 初始化加载流程 1.浏览器载入HTML,然后把它解析成DOM. 2.浏览器载入angular.js脚本. 3.AngularJS等到DOMContentLoaded事件触发. ...
最新文章
- 解决SWFUpload在Chrome、Firefox浏览器下session找不到的问题
- android studio 错误: 找不到符号 符号: 方法 xxx() 位置: 类 xxx
- 大数据面试-03-大数据工程师面试题
- 《Android 应用案例开发大全(第二版)》——2.3节案例的基本框架
- matlab 非线性辨识,非线性系统辨识Matlab实现
- game-of-life-master jenkins部署
- 《天才在左,疯子在右》读记
- AT32F407/437 LWIP FreeRTOS Multicast
- linux下find命令的详细说明
- win12 修改dns脚本
- HiveSQL percentile和percentile_approx 函数计算千分数
- 服务器搭建系列之序章:总览,2022最新版本
- 企业招投标采购管理系统源码 一站式全流程采购招标系统
- WEB前端期末大作业——关于酒店主题网站设计——高级酒店公寓网页(4页)
- 玩游戏使用云服务器,云服务器可以玩大型游戏吗?
- 离散数学之数理结构推理理论
- Bean Definition到底是什么,附spring思维导图分享
- 0基础自学php教程
- 商城-商品规格管理-SPU和SKU数据结构
- 矩阵中的主元是什么意思(在消去过程中起主导作用的元素)
热门文章
- Http 请求头中的 Proxy-Connection
- springmvc和mybatis整合关键配置
- 匹夫细说C#:委托的简化语法,聊聊匿名方法和闭包
- 如何彻底卸载mysql(xp)
- 生命的脆弱——悼念朋友
- 所有接口添加plist文件的写法 swift
- Office 2016使用NTKO OFFICE控件提示“文件存取错误”的解决办法
- Python openpyxl 之 Excel 文档简单操作
- vijos - P1279Leave-绿光(数学归纳法 + python)
- 移动端开发者眼中的前端开发流程变迁与前后端分离