深入理解Angularjs向指令传递数据双向绑定机制


Posted in Javascript onDecember 31, 2016

下面来先看一个简单例子

<!DOCTYPE html>
<html lang="zh-CN" ng-app="app">
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="../bootstrap.min.js">
</head>
<body>
  <label>硬编码的input</label>
  <input type="text" ng-model="Url">
  <div my-directive some-attr="Url"></div>

  <script src="../angular.min.js"></script>
  <script>
    angular.module('app', [])
    .directive('myDirective', function() {
      return {
        restrict: 'A', 
        replace: true,
        scope: { 
          myUrl: '=someAttr', // 等号用做 双向绑定 这里不做详细介绍
        }, 
        template: '<div>'+
              '<label>指令中的input</label>'+
              '<input type="text" ng-model="myUrl">'+
              '<a href="{{ myUrl }}">点我试试</a>'+
             '</div>'
        
      }
    })
  </script>
</body>
</html>

这个例子我用通俗的话来过一遍

1.使用隔离作用域 让DOM中的 ng-model="Url" ,这里暂且叫他'A' 与 指令中的 some-attr="Url" --> 'B' 形成双向绑定关系

scope: { 
  myUrl: '=someAttr',
},

经过上面的步骤,B与 隔离作用域中的model myUrl 就指向了同一个地方

2.使隔离作用域中的model myUrl -->'B' 与指令模板中的 ng-model="myUrl" -->'C' 形成双向绑定关系

template: '<div>'+
       '<label>指令中的input</label>'+
       '<input type="text" ng-model="myUrl">'+
       '<a href="{{ myUrl }}">点我试试</a>'+
     '</div>'

这个时候 A B C 就同时指向了 一个地址 所有的事情也就顺理成章了

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
Javascript操纵Cookie实现购物车程序
Feb 15 Javascript
jQuery 下拉列表 二级联动插件分享
Mar 29 Javascript
Html5的placeholder属性(IE兼容)实现代码
Aug 30 Javascript
js中取得变量绝对值的方法
Jan 03 Javascript
jQuery获取页面元素绝对与相对位置的方法
Jun 10 Javascript
javascript中SetInterval与setTimeout的定时器用法
Aug 24 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
Mar 12 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
May 10 Javascript
简单实现jQuery多选框功能
Jan 09 Javascript
使用Vue自定义数字键盘组件(体验度极好)
Dec 19 Javascript
javascript中的replace函数(带注释demo)
Jan 07 Javascript
vue-router之解决addRoutes使用遇到的坑
Jul 19 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 #Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
Dec 31 #Javascript
angularjs中ng-attr的用法详解
Dec 31 #Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
Dec 31 #Javascript
Angular JS数据的双向绑定详解及实例
Dec 31 #Javascript
Javascript 实现全屏滚动实例代码
Dec 31 #Javascript
Node.js中如何合并两个复杂对象详解
Dec 31 #Javascript
You might like
PHP写的获取各搜索蜘蛛爬行记录代码
2012/08/21 PHP
php中使用in_array() foreach array_search() 查找数组是否包含时的性能对比
2015/04/14 PHP
php常用字符串String函数实例总结【转换,替换,计算,截取,加密】
2016/12/07 PHP
javascript编程起步(第二课)
2007/01/10 Javascript
JavaScript中“+”的陷阱深刻理解
2012/12/04 Javascript
javascript中call和apply方法浅谈
2013/09/27 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
2015/03/03 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
js中json处理总结之JSON.parse
2016/10/14 Javascript
用nodeJS搭建本地文件服务器的几种方法小结
2017/03/16 NodeJs
利用jQuery解析获取JSON数据
2017/04/08 jQuery
jQuery使用JSONP实现跨域获取数据的三种方法详解
2017/05/04 jQuery
vue组件的写法汇总
2018/04/12 Javascript
简化vuex的状态管理方案的方法
2018/06/02 Javascript
微信小程序实现发红包功能
2018/07/11 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
2018/09/07 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
2018/09/28 Javascript
微信小程序页面缩放式侧滑效果的实现代码
2018/11/15 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
2020/01/16 jQuery
vue props 单项数据流实例分享
2020/02/16 Javascript
用Python的Flask框架结合MySQL写一个内存监控程序
2015/11/07 Python
python实现井字棋游戏
2020/03/30 Python
Python使用sftp实现上传和下载功能(实例代码)
2017/03/14 Python
PyTorch线性回归和逻辑回归实战示例
2018/05/22 Python
Python去除字符串前后空格的几种方法
2019/03/04 Python
TensorFlow卷积神经网络之使用训练好的模型识别猫狗图片
2019/03/14 Python
详解python深浅拷贝区别
2019/06/24 Python
python将字符串list写入excel和txt的实例
2019/07/20 Python
python 中Arduino串口传输数据到电脑并保存至excel表格
2019/10/14 Python
语文教育专业推荐信范文
2013/11/25 职场文书
小饰品店的创业计划书范文
2013/12/28 职场文书
农林环境专业求职信
2014/03/13 职场文书
2014年党风建设工作总结
2014/11/19 职场文书
2015年乡镇信访工作总结
2015/04/07 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书
Python利用FlashText算法实现替换字符串
2022/03/31 Python