深入理解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中JSON.parse的影响概述
Jul 17 Javascript
javascript中typeof的使用示例
Dec 19 Javascript
JavaScript限定图片显示大小的方法
Mar 11 Javascript
利用CSS3在Angular中实现动画
Jan 15 Javascript
jQuery Mobile页面返回不需要重新get
Apr 26 Javascript
JavaScript制作颜色反转小游戏
Sep 25 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
js实现PC端和移动端刮卡效果
Mar 27 Javascript
信息滚动效果的实例讲解
Sep 18 Javascript
微信小程序 腾讯地图显示偏差问题解决
Jul 27 Javascript
VSCode 配置uni-app的方法
Jul 11 Javascript
Vue3.0的优化总结
Oct 16 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使用range协议实现输出文件断点续传代码实例
2014/07/04 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
PHP实现财务审核通过后返现金额到客户的功能
2019/07/04 PHP
javascript实现的动态添加表单元素input,button等(appendChild)
2007/11/24 Javascript
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
2013/12/05 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
2014/09/25 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
JavaScript中Window对象的属性及事件
2015/12/25 Javascript
一波JavaScript日期判断脚本分享
2016/03/06 Javascript
第九章之路径分页标签与徽章组件
2016/04/25 Javascript
jQuery 全选 全部选 反选 实现代码
2016/08/17 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
JS实现简单抖动效果
2017/06/01 Javascript
JavaScript高级函数应用之分时函数实例分析
2018/08/03 Javascript
layui弹出层按钮提交iframe表单的方法
2018/08/20 Javascript
如何在基于vue-cli的项目自定义打包环境
2018/11/10 Javascript
vue-cli随机生成port源码的方法
2019/09/02 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
2020/07/28 Javascript
vue实现简易的双向数据绑定
2020/12/29 Vue.js
用Python编写一个简单的FUSE文件系统的教程
2015/04/02 Python
详解Pandas之容易让人混淆的行选择和列选择
2019/07/10 Python
使用python模拟命令行终端的示例
2019/08/13 Python
python openCV获取人脸部分并存储功能
2019/08/28 Python
Python 实现try重新执行
2019/12/21 Python
Python爬虫爬取杭州24时温度并展示操作示例
2020/03/27 Python
如何基于python把文字图片写入word文档
2020/07/31 Python
荷兰最大的多品牌男装连锁店:Adam Brandstore
2019/12/31 全球购物
门卫工作岗位职责
2013/12/17 职场文书
促销活动策划方案
2014/01/12 职场文书
创业计划书如何编写
2014/02/06 职场文书
2014年母亲节寄语
2014/05/07 职场文书
校庆团日活动总结
2014/08/28 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
就业意向书范本
2015/05/11 职场文书
自己搭建resnet18网络并加载torchvision自带权重的操作
2021/05/13 Python