<!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 就同时指向了 一个地址 所有的事情也就顺理成章了

angularjs深入理解向指令传递数据，双向绑定机制的更多相关文章

  1. AngularJS学习笔记（三）数据双向绑定

    双向绑定 双向绑定是AngularJS最实用的功能,它节省了大量的代码,使我们专注于数据和视图,不用浪费大量的代码在Dom监听.数据同步上,关于双向更新,可看下图: 下面,我们通过代码来实现.先不要纠 ...

  2. 我的angularjs源码学习之旅3——脏检测与数据双向绑定

    前言 为了后面描述方便,我们将保存模块的对象modules叫做模块缓存.我们跟踪的例子如下 <div ng-app="myApp" ng-controller='myCtrl ...

  3. AngularJS中数据双向绑定(two-way data-binding)

    1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...

  4. 深入理解Proxy 及 使用Proxy实现vue数据双向绑定

    阅读目录 1.什么是Proxy?它的作用是? 2.get(target, propKey, receiver) 3.set(target, propKey, value, receiver) 4.ha ...

  5. 数据双向绑定页面无反应（angularjs）

    问题引入 使用 angularjs进行过一段时间的开发后,基本上都会遇到一个这样的坑:页面进行了双向数据绑定,控制层的数据也已经改变了,但是视图层的数据却没有改变. 其实造成这个问题的原因大致分为以下 ...

  6. 深入理解 Object.defineProperty 及实现数据双向绑定

    Object.defineProperty() 和 Proxy 对象,都可以用来对数据的劫持操作.何为数据劫持呢?就是在我们访问或者修改某个对象的某个属性的时候,通过一段代码进行拦截行为,然后进行额外 ...

  7. 前端笔记之微信小程序（二）{{}}插值和MVVM模式&数据双向绑定&指令&API

    一.双花括号{{}}插值和MVVM模式 1.1 体会{{}}插值 index.wxml的标签不是html的那些标签,这里的view就是div. {{}}这样的插值写法,叫做mustache语法.mus ...

  8. Jquery实现数据双向绑定（赋值和取值），类似AngularJS

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

  9. Angular数据双向绑定

    Angular数据双向绑定 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Angul ...

随机推荐

  1. 使用js 在IE和火狐firfox 里动态增加select 的option

    使用js 在IE和火狐firfox 里动态增加select 的option <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transition ...

  2. Linux系统挂载点与分区的关系（转载）

    计算机中存放信息的主要的存储设备就是硬盘,但是硬盘不能直接使用,必须对硬盘进行分割,分割成的一块一块的硬盘区域就是磁盘分区.在传统的磁盘管理中,将一个硬盘分为两大类分区:主分区和扩展分区.主分区是能够 ...

  3. Android 常用对话框Dialog封装

    Android 6种 常用对话框Dialog封装 包括: 消息对话框.警示(含确认.取消)对话框.单选对话框. 复选对话框.列表对话框.自定义视图(含确认.取消)对话框 分别如下图所示:       ...

  4. 转：SetWindowText 的用法

    SetWindowText   函数功能:该函数改变指定窗口的标题栏的文本内容(如果窗口有标题栏).如果指定窗口是一个控件,则改变控件的文本内容.然而,SetWindowText函数不改变其他应用程序 ...

  5. css属性之transition

    浏览器支持 Internet Explorer 10.Firefox.Opera 和 Chrome 支持 transition 属性. Safari 支持替代的 -webkit-transition ...

  6. Wish | IT桔子

    Wish | IT桔子 Wish www.wish.com   认领 关注 分享

  7. Storm drpc学习

    示例代码: package com.lky.test; import org.apache.commons.logging.Log; import org.apache.commons.logging ...

  8. Spring+Mybatis+mysql配置

    mybatis的映射文件 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper SY ...

  9. css+javascript 写的HTML5 微信端输入支付密码键盘

    微信端没有纯数字键盘,用html5写了一个模仿ios输入支付密码键盘效果 keyboard.js var _keyboard = {}; $(document).ready(function(){ _ ...

  10. superslide2

    标签切换 / 书签切换 / 默认效果 http://www.superslide2.com/demo.html 4个Web前端经典实用值得学习收藏的地图实现模板~ http://www.iteye.c ...