AngularJS中scope的绑定策略实例分析


Posted in Javascript onOctober 30, 2017

本文实例讲述了AngularJS中scope的绑定策略。分享给大家供大家参考,具体如下:

当scope选项写为scope:{ }这种形式的时候,就已经为指令生成了隔离作用域,指令的模板就无法访问外部作用域了:

具有隔离作用域的指令最主要的使用场景是创建可复用的组件,组件可以在未知上下文中使用,并且可以避免污染所处的外部作用域或不经意地污染内部作用域。

现在,我们来看看绑定策略的三种形式: @、= 、&

1. @

本地作用域属性:使用@符号将本地作用域同DOM属性的值进行绑定。指令内部作用域可以使用外部作用域的变量:

@ (or @attr)

把当前的属性作为字符串传递。你还可以绑定来自外层的scope的值,在属性值中插入{{ }}即可。什么意思呢?说的简单一点就是假设你在模板中有个双花括号表达式,然后我们把表达式里的内容和html中指令里特定名字的属性绑定起来:

<div ng-controller="nameController">
  <direct for-name="{{ Name }}"></direct>
<div>
directive("direct",function(){
    return{
      restrict: 'A',
      template: '<div>指令中:{{ name }}</div>',
      scope:{
       name:'@forName'
      }
     }
 })
.controller("nameController",function($scope){
   $scope.Name="张三";
});

2. =

与父scope中的属性进行双向绑定

@是针对字符串(准确来说是表达式expression)而用,但=是针对某个对象的引用;

<div ng-controller="nameController">
  <direct case="data[0]"></direct>
  <direct case="data[1]"></direct>
<div>
directive("direct",function(){
    return{
      restrict: 'ECMA',
      template: '<div>指令中:{{ case.name }}</div>',
      scope:{
       case:'='
      }
     }
 })
.controller("nameController",function($scope){
   $scope.data=[{name:"张三"},{name:"李四"}];
});

data是一个对象数组,里面包含了两个对象,所以,我们分别把两个对象传递给了case这个属性,case属性就把这个对象的引用传递给了模板中我们写的{{ case.name }}中的case;而如果你在=后边加上了自己定义的名字,那只要把html里case属性换成那个名字就可以了。

3. &

传递来自父scope中的函数、稍后调用

它的含义是:对父级作用域进行绑定,并将其中的属性包装成一个函数,注意任何类型的属性都会被包装成一个函数,比如一个单纯的字符串,或是一个对象数组,或是一个函数方法。

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
jQuery 解析xml文件
Aug 09 Javascript
jQuery对html元素取值与赋值的方法
Nov 20 Javascript
js利用clipboardData实现截屏粘贴功能
Oct 12 Javascript
Vue通过input筛选数据
Oct 26 Javascript
validationEngine 表单验证插件使用实例代码
Jun 15 Javascript
React Native开发封装Toast与加载Loading组件示例
Sep 08 Javascript
vue-cli项目配置多环境的详细操作过程
Oct 30 Javascript
Vue 开发必须知道的36个技巧(小结)
Oct 09 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
Oct 26 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
Mar 13 Javascript
js实现跳一跳小游戏
Jul 31 Javascript
Nuxt.js nuxt-link与router-link的区别说明
Nov 06 Javascript
JavaScript数组push方法使用注意事项
Oct 30 #Javascript
JavaScript Date对象应用实例分享
Oct 30 #Javascript
AngularJS实现controller控制器间共享数据的方法示例
Oct 30 #Javascript
Angularjs按需查询实例代码
Oct 30 #Javascript
Vue中正确使用jQuery的方法
Oct 30 #jQuery
ES6 javascript中Class类继承用法实例详解
Oct 30 #Javascript
轻松理解vue的双向数据绑定问题
Oct 30 #Javascript
You might like
php Xdebug 调试扩展的安装与使用.
2010/03/13 PHP
常用的php图片处理类(水印、等比缩放、固定高宽)分享
2015/06/19 PHP
深入浅析PHP7.0新特征(五大新特征)
2015/10/29 PHP
详解PHP原生DOM对象操作XML的方法
2016/10/17 PHP
PHP面向对象中new self()与 new static()的区别浅析
2017/08/17 PHP
JS window.opener返回父页面的应用
2009/10/24 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
2012/04/15 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
2013/12/11 Javascript
js与C#进行时间戳转换
2014/11/14 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
javascript控制台详解
2015/06/25 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
2015/11/17 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
Nodejs下DNS缓存问题浅析
2016/11/16 NodeJs
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
VUE 3D轮播图封装实现方法
2018/07/03 Javascript
JavaScript实现连连看连线算法
2019/01/05 Javascript
简单了解JavaScript sort方法
2019/11/25 Javascript
React中Ref 的使用方法详解
2020/04/28 Javascript
在Python中操作列表之list.extend()方法的使用
2015/05/20 Python
Python序列操作之进阶篇
2016/12/08 Python
Python将文字转成语音并读出来的实例详解
2019/07/15 Python
pandas数据处理进阶详解
2019/10/11 Python
python SVD压缩图像的实现代码
2019/11/05 Python
python 有效的括号的实现代码示例
2019/11/11 Python
Python实现随机取一个矩阵数组的某几行
2019/11/26 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
Under Armour安德玛意大利官网:美国高端运动科技品牌
2020/01/16 全球购物
竞争性谈判邀请书
2014/02/06 职场文书
《匆匆》教学反思
2014/02/22 职场文书
领导干部作风整顿剖析材料
2014/10/11 职场文书
房屋分割离婚协议书范本
2014/12/01 职场文书
给病人的慰问信
2015/03/23 职场文书
财务部岗位职责范本
2015/04/14 职场文书
小学数学国培研修日志
2015/11/13 职场文书
Laravel中获取IP的真实地理位置
2021/04/01 PHP