<!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. centos 开启apache rewrite模式

    mod_rewrite能使网页伪静态,对于搜索引擎友好,下面就是开启这个功能的说明!启用mod_rewrite模块在conf目录的httpd.conf文件中找到 LoadModule rewrite_ ...

  2. 最简单的ASP动态页面生成伪静态方法

    目前网站制作中很多网站都采用生成静态页的方法,原因是这样访问速度会得到提高(服务器端CPU利用率很低),另外也容易被搜索引擎收录,但是这带来的一个问题就是需要足够大的空间存放这些静态页面,如果你的空间 ...

  3. Ftp协议Socket实现

    原来用WebRequest来传输文件,被人鄙视了.就弄个Socket版的,支持Active,Passive模式. 带事件日志,有时间的人可以拿去做C#版的flashfxp. public class ...

  4. xx通CGI流量控制

    流量控制共分2步,首先在CGI框架对用户的ip作限制,第二限制每个CGI的流量.   一.基于IP的流量控制 用共享内存(shm)的方式保存基于ip的访问信息. 配置文件中 <variable ...

  5. 剑指offer之关于整数的处理

    首先是整数次方的处理 在这处理的时候有几个细节主义处理 1.当指数是负数的时候 2.当指数式0的时候 3.当不满足条件的时候要抛出异常 再一个就是常用的将一个树化为二进制的形式,或者是求整数的幂或者矩 ...

  6. Linux查看机器是多少位

    命令: file /bin/ls或者file /sbin/init 示例: 如上所示,我的机器是32位的.

  7. Xamarin.Forms App Settings

    配合James Montemagno的Component [Settings Plugin],实现Xamarin.Forms的设置. 更新系统配置且不需要进行重启app. 方式一xml Xamarin ...

  8. python word操作深入

    python 把word转html:上传页面<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  9. git中的常用指令名及其意义

    add 添加新文件到 Git 代码仓库的索引中 $ git add filename mv 移动或重命名文件 $ git mv old-filename new-filename rm 从工作目录和 ...

  10. LINQPad 调试

    var ss=from o in Orders from od in OrderDetails.Where(od=>od.OrderId == od.OrderId) from c in Cou ...