<!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. 在RichTextBox控件中添加图片和文字

    public void SetText(RichTextBox rtb) { rtb.Text = "在RichTextBox控件中添加图片和文字" + Environment.N ...

  2. 转载：/etc/resolv.conf的作用

    转载网址:http://jiao-zhong.blog.sohu.com/97976004.html 该文件是DNS域名解析的配置文件,它的格式很简单,每行以一个关键字开头,后接配置参数.resolv ...

  3. 【学习笔记】【oc】类和对象及类的三大基本特征

    1.类和对象 类是抽象化,对象是具体化. (1)定义类: 分为两个步骤,类的声明:定义类的成员变量和方法:@interface 用于声明定义类的接口部分,@end表面定义结束:. 成员变量的定义:{} ...

  4. 针对苹果最新审核要求为应用兼容IPv6-备用

    在WWDC2015上苹果宣布iOS9将支持纯IPv6的网络服务.2016年初开始所有提交到App Store的应用必须支持IPv6.为确保现有的应用是兼容的,我们需要注意下面几点. 不建议使用底层的网 ...

  5. 最新Android 出现Please ensure that adb is correctly located at问题的解决方法

    最近经常遇到下面的问题 遇到问题描述: 运行android程序控制台输出: [2013-07-23 17:28:06 - ] The connection to adb is down, and a  ...

  6. 获取Map API Key

    开发人员在基于Google Maps服务进行开发之前,需要申请一组验证过的Map API Key,这样才可以使用Google Maps服务.申请过程如下:1.在Eclipse中打开“Window”|“ ...

  7. Shell循环处理

    date=`echo $1 | tr -d '-'` date1=`echo $1` date_end=`get_date $2 +1 | sed 's/-//g'` while [ 1 ] do d ...

  8. Android中使用shape制作一个旋转的progressbar

    public class ZNtestResActivity extends Activity { @Override public void onCreate(Bundle savedInstanc ...

  9. Linux桌面快捷方式建立方案

    Linux桌面快捷方式建立方案 以下以添加Eclips为例 在桌面上添加Eclips.desktop 文件,向其写入如下代码 [Desktop Entry] Name=Eclipse Comment= ...

  10. 【2013南京区域赛】部分题解 hdu4802—4812

    上周末打了一场训练赛,题目是13年南京区域赛的 这场题目有好几个本来应该是我擅长的,但是可能是太久没做比赛了各种小错误代码写的也丑各种warusn trush搞得人很不爽 全场题之一的1002也没有想 ...