<!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. PHPCMS 标签与解析小记_Jason

    Content模块下的标签解析:phpcms\modules\content\classes\content_tag.class.php 推荐位:public function position

  2. Windows坐标系

    .逻辑坐标 逻辑坐标是独立于设备的,它与设备点的大小无关.使用逻辑单位,是实现"所见即所得"的基础.当程序员在调用一个画线的GDI函数LineTo,画出25.4mm(1英寸) 长的 ...

  3. Codeforces 704D Captain America

    题意:平面上有n个点,每个点必须涂成红色和蓝色中的一种,花费各为r和b(对所有的点花费都一样).m条限制,每条限制形如"y=b这条直线上两种颜色的点的数目之差的绝对值不能超过c"或 ...

  4. MD5加密字符串－备用

    @interface NSString (MyExtensions) - (NSString *) md5; @end @implementation NSString (MyExtensions) ...

  5. IL2CPP的前世今生

    在2014年年中的时候,Unity3D官方博客上却发了一篇"The future of scripting in unity"的文章,引出了IL2CPP的概念,感觉有取代Mono之 ...

  6. AdHoc发布时出现重复Provisioning Profile的解决方案

    当在developer.apple.com更新Provisioning Profile(添加新机器)后,下载到本地,双击载入xcode,运行时没问题.但如果用adhoc发布,可能会发现重复的provi ...

  7. android反编译工具 ApkDec-Release-0.1

    (1 )使用帮助    1. 选择 all  全部编译内容包括jar .xml .及其他资源文件    2. 选择 jar  只反编译并打成jar 包    3. 反编译后你可以使用jd-gui.ex ...

  8. v8 源码获取与build

    最近准备在工作之余研究下v8,下班时间鼓捣了2天,现在终于能下载,能gclient sync了. 刚开始的目的就是跑一个hello world,按照wiki上的例子来: https://github. ...

  9. ural 1203. Scientific Conference

    http://acm.timus.ru/problem.aspx?space=1&num=1203 #include <cstdio> #include <cstring&g ...

  10. 什么是PWM、PFM及VFM

    做电源设计的大都知道PWM和PFM这两个概念.而VFM模式是在大功率輸出時為PWM模式在輕負載輸出時變為PFM模式的一種混合開關模式.目前开关电源的控制技术主要就是这三种:1.脉冲宽度调制器(PWM) ...