深入理解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根据数据生成百分比图和柱状图的实例代码
Jul 14 Javascript
jQuery 插件开发指南
Nov 14 Javascript
JavaScript面向对象的实现方法小结
Apr 14 Javascript
js实现带按钮的上下滚动效果
May 12 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
Jun 19 Javascript
全面解析Bootstrap排版使用方法(标题)
Nov 30 Javascript
浅谈javascript中执行环境(作用域)与作用域链
Dec 08 Javascript
Vue form 表单提交+ajax异步请求+分页效果
Apr 22 Javascript
解决layui数据表格table的横向滚动条显示问题
Sep 04 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
Sep 26 Javascript
ant-design表单处理和常用方法及自定义验证操作
Oct 27 Javascript
javascript的setTimeout()使用方法总结
Nov 20 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 socke 向指定页面提交数据
2008/07/23 PHP
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
看了就知道什么是JSON
2007/12/09 Javascript
JavaScript 学习笔记(九)call和apply方法
2010/01/11 Javascript
jquery通过a标签删除table中的一行的代码
2013/12/02 Javascript
Javascript中浮点数相乘的一个解决方法
2014/06/03 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
jQuery事件绑定与解除绑定实现方法
2015/04/15 Javascript
javascript控制台详解
2015/06/25 Javascript
Jquery轮播效果实现过程解析
2016/03/30 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
2016/11/10 Javascript
如何从零开始利用js手写一个Promise库详解
2018/04/19 Javascript
微信小程序http连接访问解决方案的示例
2018/11/05 Javascript
webpack 静态资源集中输出的方法示例
2018/11/09 Javascript
javascript实现京东登录显示隐藏密码
2020/08/02 Javascript
原生js实现拖拽移动与缩放效果
2020/08/24 Javascript
jQuery+ajax实现文件上传功能
2020/12/22 jQuery
利用django如何解析用户上传的excel文件
2017/07/24 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
Python包和模块的分发详细介绍
2020/06/19 Python
Python远程方法调用实现过程解析
2020/07/28 Python
Python 如何操作 SQLite 数据库
2020/08/17 Python
python两种注释用法的示例
2020/10/09 Python
新奇的小玩意:IWOOT
2016/07/21 全球购物
苹果中国官方网站:Apple中国
2016/07/22 全球购物
史蒂夫·马登加拿大官网:Steve Madden加拿大
2017/11/18 全球购物
.NET方向面试题
2014/11/20 面试题
创业计划书中要认真思考的问题
2013/12/28 职场文书
2014年五四青年节演讲稿范文
2014/04/22 职场文书
毕业生学校推荐信范文
2014/05/21 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
初二学生评语大全
2014/12/26 职场文书
2015年大学生工作总结
2015/04/21 职场文书
企业年会祝酒词
2015/08/11 职场文书
Python爬虫基础之爬虫的分类知识总结
2021/05/13 Python