<!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. .net转php laraval框架学习系列（一） 环境搭建

    之前也没写过什么博客,可能文章结构比较混乱,想到那写到哪. 主要是把自己学习中的经验写下来. 为什么选择laravel框架,是因为laravel框架目前是Php最流行的框架,深入研究后发现和asp.n ...

  2. jsp js java

    Java技术 J a v a是一种 简单易用. 完全面向对象. 具有平台无关性且 安全可靠的主要面向I n t e r n e t的开发工具. 自从1 9 9 5年正式问世以来,J a v a的快速发 ...

  3. 解压Taobao手机客户端发现的东西

    今天解压了Taobao手机客户端发现了几个.so文件, 其中有两个挺感兴趣的,查了一下,以后去研究下. libBSPatch.so 是用于支持增量更新功能的库文件. libwebp.so  好像是We ...

  4. Intel hex 文件格式解密

    Intel hex 文件常用来保存单片机或其他处理器的目标程序代码.它保存物理程序存储区中的目标代码映象.一般的编程器都支持这种格式. Intel hex 文件全部由可打印的ASCII字符组成(可以用 ...

  5. 使用定制的ArrayAdapter制作ListView的Items（翻译）

    Translated by:AcerWang    原文出自:customizing-android-listview-items-with-custom-arrayadapter  背景介绍 对于现 ...

  6. VS2013单元测试

    原文地址:http://www.luacloud.com/2014/vs2013-unit-test-generator.html 下载地址:http://visualstudiogallery.ms ...

  7. POJ-1488(字符串应用)

    Description TEX is a typesetting language developed by Donald Knuth. It takes source text together w ...

  8. Java多线程中变量的可见性

    之所以写这篇博客, 是因为在csdn上看到一个帖子问的就是这个问题. 废话不多说, 我们先看看他的代码(为了减少代码量, 我将创建线程并启动的部分修改为使用方法引用). 1 2 3 4 5 6 7 8 ...

  9. Adobe Photoshop CC 2015安装激活

    分享一下Adobe Photoshop CC 2015 安装激活步骤 工具/原料   xf-adobecc2015.exe Adobe Photoshop CC 2015官方原版 方法/步骤   1 ...

  10. memcached学习——常用命令+基于java客户端的3种简单实现（二）

    常用命令: memcached设计的原则就是简单,所以支持的命令也不是特别多~ 1.查看memcached的状态,主要用于分析内存的使用状况.优化内存分配等 stats 查看memcached的运行状 ...