深入理解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 相关文章推荐
很可爱的输入框
Aug 03 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
Mar 18 Javascript
checkbox全选所涉及到的知识点介绍
Dec 31 Javascript
javascript跨浏览器的属性判断方法
Mar 16 Javascript
AngularJS中处理多个promise的方式
Feb 02 Javascript
node.js从数据库获取数据
May 08 Javascript
javascript 数组的正态分布排序的问题
Jul 31 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
Nov 12 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
Jan 16 Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 Javascript
Vue.js中的高级面试题及答案
Jan 13 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
Nov 10 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
Yii结合CKEditor实现图片上传功能
2014/06/13 PHP
大家都应该掌握的PHP关联数组使用技巧
2015/12/25 PHP
YII分模块加载路由的实现方法
2018/10/01 PHP
Javascript 汉字字节判断
2009/08/01 Javascript
imgAreaSelect 中文文档帮助说明
2011/10/08 Javascript
浏览器兼容性问题大汇总
2015/12/17 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
详解Jquery的事件操作和文档操作
2016/12/19 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
详解Vue 动态添加模板的几种方法
2017/04/25 Javascript
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
vue2.0结合Element实现select动态控制input禁用实例
2017/05/12 Javascript
Vue非父子组件通信详解
2017/06/12 Javascript
JS实现按钮添加背景音乐示例代码
2017/10/17 Javascript
微信小程序switch组件使用详解
2018/01/31 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
2018/02/08 Javascript
Vue进度条progressbar组件功能
2018/04/17 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
2018/09/21 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
python实现画一颗树和一片森林
2018/06/25 Python
简单分析python的类变量、实例变量
2019/08/23 Python
在pandas中遍历DataFrame行的实现方法
2019/10/23 Python
python飞机大战 pygame游戏创建快速入门详解
2019/12/17 Python
Python如何读取文件中图片格式
2020/01/13 Python
Python 从attribute到property详解
2020/03/05 Python
css sprite简单实例
2016/05/23 HTML / CSS
init进程的作用
2015/08/20 面试题
婚礼答谢宴主持词
2014/03/14 职场文书
入股协议书范本
2014/04/14 职场文书
党支部综合考察材料
2014/05/19 职场文书
群众路线领导干部个人对照检查材料(集锦)
2014/09/23 职场文书
《葡萄沟》教学反思
2016/02/23 职场文书
Java数据结构之链表相关知识总结
2021/06/18 Java/Android
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript