深入理解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 相关文章推荐
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
Jul 19 Javascript
jquery 按钮状态效果 正常、移上、按下
Aug 12 Javascript
jquery submit ie6下失效的原因分析及解决方法
Nov 15 Javascript
验证控件与Button的OnClientClick事件详细解析
Dec 04 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
Jul 29 Javascript
JavaScript实现网页截图功能
Oct 16 Javascript
javascript实现按回车键切换焦点
Feb 09 Javascript
如何高效率去掉js数组中的重复项
Apr 12 Javascript
Vue中保存数据到磁盘文件的方法
Sep 06 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
Nov 26 Javascript
vue实现分页组件
Jun 16 Javascript
js form表单input框限制20个字符,10个汉字代码实例
Apr 12 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执行速度全攻略(下)
2006/10/09 PHP
实现 win2003 下 mysql 数据库每天自动备份
2006/12/06 PHP
PHP多个版本的分析解释
2011/07/21 PHP
php通过sort()函数给数组排序的方法
2015/03/18 PHP
PHP程序中的文件锁、互斥锁、读写锁使用技巧解析
2016/03/21 PHP
JS 显示当前日期与时间的代码
2010/03/24 Javascript
js如何获取file控件的完整路径具体实现代码
2013/05/15 Javascript
jQuery zclip插件实现跨浏览器复制功能
2015/11/02 Javascript
javascript类型系统 Window对象学习笔记
2016/01/07 Javascript
JavaScript新增样式规则(推荐)
2016/07/19 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
2017/01/10 Javascript
原生js实现电商侧边导航效果
2017/01/19 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
2017/02/17 Javascript
footer定位页面底部(代码分享)
2017/03/07 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
2017/07/24 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
2017/10/24 Javascript
基于ES6作用域和解构赋值详解
2017/11/03 Javascript
vue-cli配置全局sass、less变量的方法
2019/06/06 Javascript
解决layui富文本编辑器图片上传无法回显的问题
2019/09/18 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
2019/10/21 Javascript
python的三目运算符和not in运算符使用示例
2014/03/03 Python
Python设计模式之观察者模式实例
2014/04/26 Python
python常见数制转换实例分析
2015/05/09 Python
python字典操作实例详解
2017/11/16 Python
python自动发微信监控报警
2019/09/06 Python
python的scipy实现插值的示例代码
2019/11/12 Python
python3实现在二叉树中找出和为某一值的所有路径(推荐)
2019/12/26 Python
Python使用graphviz画流程图过程解析
2020/03/31 Python
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
大学生水文观测实习自我鉴定
2013/09/29 职场文书
大学毕业感言
2014/01/10 职场文书
卖车协议书
2014/04/21 职场文书
公司租房协议书
2014/10/14 职场文书
超市收银员岗位职责
2015/04/07 职场文书
雷锋的故事观后感
2015/06/10 职场文书
Python中Numpy和Matplotlib的基本使用指南
2021/11/02 Python