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 相关文章推荐
javascript 24小时弹出一次的代码(利用cookies)
Sep 03 Javascript
js+HTML5实现视频截图的方法
Jun 16 Javascript
每天一篇javascript学习小结(面向对象编程)
Nov 20 Javascript
js实现拖拽效果(构造函数)
Dec 14 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 Javascript
一道常被人轻视的web前端常见面试题(JS)
Feb 15 Javascript
Javascript中的prototype与继承
Feb 06 Javascript
基于Vue制作组织架构树组件
Dec 06 Javascript
Vue响应式原理深入解析及注意事项
Dec 11 Javascript
vuejs实现标签选项卡动态更改css样式的方法
May 31 Javascript
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
小程序点赞收藏功能的实现代码示例
Sep 07 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
Protoss兵种对照表
2020/03/14 星际争霸
PHP中使用mktime获取时间戳的一个黑色幽默分析
2012/05/31 PHP
smarty内置函数config_load用法实例
2015/01/22 PHP
php实现以只读方式打开文件的方法
2015/03/16 PHP
PHP正则表达式入门教程(推荐)
2016/05/18 PHP
中高级PHP程序员应该掌握哪些技术?
2016/09/23 PHP
php获取访问者浏览页面的浏览器类型
2017/01/23 PHP
(JS实现)MapBar中坐标的加密和解密的脚本
2007/05/16 Javascript
IE6下JS动态设置图片src地址问题
2010/01/08 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
JavaScript四种调用模式和this示例介绍
2014/01/02 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
2014/01/07 Javascript
JavaScript实现大数的运算
2014/11/24 Javascript
JS提交form表单实例分析
2015/12/10 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
2016/07/07 Javascript
浅谈关于.vue文件中style的scoped属性
2017/08/19 Javascript
vue-cli项目中怎么使用mock数据
2017/09/27 Javascript
Vue项目添加动态浏览器头部title的方法
2018/07/11 Javascript
微信小程序文章详情页面实现代码
2018/09/10 Javascript
React实现全局组件的Toast轻提示效果
2018/09/21 Javascript
npm scripts 使用指南详解
2018/10/08 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
[02:41]DOTA2英雄基础教程 谜团
2013/12/10 DOTA
Python结巴中文分词工具使用过程中遇到的问题及解决方法
2017/04/15 Python
Tensorflow环境搭建的方法步骤
2018/02/07 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
Python 用__new__方法实现单例的操作
2020/12/11 Python
简单聊聊H5的pushState与replaceState的用法
2018/04/03 HTML / CSS
Clarins娇韵诗英国官网:来自法国的天然护肤品牌
2017/04/18 全球购物
vue实现倒计时功能
2021/03/24 Vue.js
标准自荐信范文
2014/01/29 职场文书
大学军训感言200字
2014/02/26 职场文书
天地会口号
2014/06/17 职场文书
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL
面试中canvas绘制图片模糊图片问题处理
2022/03/13 Javascript