深入理解Angularjs向指令传递数据双向绑定机制
作者:冰果在线 时间:2024-05-02 17:38:26
下面来先看一个简单例子
<!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 就同时指向了 一个地址 所有的事情也就顺理成章了
来源:http://www.cnblogs.com/BGOnline/p/5951986.html
标签:angularjs,双向绑定,指令


猜你喜欢
mysql实现多表关联统计(子查询统计)示例
2024-01-19 18:53:26

关于Vue3过渡动画的踩坑记录
2024-06-07 16:03:35

python采集百度百科的方法
2023-01-12 03:48:35
PHP结合vue导出excel出现乱码的解决方法分享
2023-05-30 09:18:25

python3格式化字符串 f-string的高级用法(推荐)
2023-04-13 00:56:55
scrollWidth,clientWidth与offsetWidth的区别
2024-04-22 22:28:38
解决pyCharm中 module 调用失败的问题
2022-11-27 23:21:19

Python自动化运维和部署项目工具Fabric使用实例
2022-06-24 12:46:58
Pycharm修改python路径过程图解
2022-10-27 15:57:26

PHP中number_format()函数的用法讲解
2023-06-02 15:48:12

IE对CSS样式表的限制和解决方案
2008-04-28 12:27:00
Python运行不显示DOS窗口的解决方法
2021-01-18 08:06:16
了解CSS的查找匹配原理,让CSS更简洁、高效
2010-06-08 13:36:00
python脚本框架webpy模板控制结构
2023-07-08 23:45:34

python用pandas数据加载、存储与文件格式的实例
2021-09-05 03:44:47
mysql中各种常见join连表查询实例总结
2024-01-19 05:31:52

进行数据处理的6个 Python 代码块分享
2022-10-21 12:56:18
vue项目中使用this.$confirm解析
2024-05-02 17:02:09

python添加模块搜索路径方法
2023-11-20 09:29:45
SQL Server 数据库管理常用的SQL和T-SQL语句
2024-01-27 01:10:53