深入理解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,双向绑定,指令
0
投稿

猜你喜欢

  • 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
  • asp之家 网络编程 m.aspxhome.com