在《AngularJS权威教程》中，自定义指令和DOM双向数据绑定有一个在线demo，网址：http://jsbin.com/IteNita/1/edit?html,js,output，具体代码如下：

<!doctype html>

<html ng-app="myApp">

<head>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>

</head>

<body>

  <label>Their URL field:</label>

  <input type="text" ng-model="theirUrl">

  <div my-directive

       some-attr="theirUrl"

       my-link-text="Click me to go to Google"></div>

  <script>

    angular.module('myApp', [])

    .directive('myDirective', function() {

      return {

        restrict: 'A',

        replace: true,

        scope: {

          myUrl: '=someAttr',

          myLinkText: '@'

        },

        template: '\

          <div>\

            <label>My Url Field:</label>\

            <input type="text" ng-model="myUrl" />\

            <a href="{{myUrl}}">{{myLinkText}}</a>\

          </div>\

        '

      }

    })

  </script>

</body>

</html>

其中myUrl: '=someAttr'我不是很理解，于是改成 myUrl: '@someAttr',但是这样页面显示如图：

aaarticlea/png;base64,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" alt="" />

查看元素发现链接的href="theirUrl",并且；两个输入框的内容也不同步，仔细查看代码，发现DOM中将some-attr设置值方式不是表达式，所以修改如下（修改处为绿色）：

<body>

  <label>Their URL field:</label>

  <input type="text" ng-model="theirUrl">

  <div my-directive

       some-attr={{theirUrl}}

       my-link-text="Click me to go to Google"></div>

  <script>

    angular.module('myApp', [])

    .directive('myDirective', function() {

      return {

        restrict: 'A',

        replace: true,

        scope: {

          myUrl: '@someAttr',

          myLinkText: '@'

        },

        template: '\

          <div>\

            <label>My Url Field:</label>\

            <input type="text" ng-model="myUrl" />\

            <a href="{{myUrl}}">{{myLinkText}}</a>\

          </div>\

        '

      }

    })

  </script>

</body>

效果是，第2个输入框随着第1个变化，反之不是。

总结：指令要访问其内部的指令，需要：

1.指令属性值用表达式即{{}}设置，改为“”

2.内部指令对应属性数据绑定”@”改为”=”

《AngularJS权威教程》中关于指令双向数据绑定的理解的更多相关文章

  1. 《AngularJS权威教程》

    第二章.数据绑定 2.2 简单的数据绑定 <!DOCTYPE html> <html ng-app> <head> <title>Simple app& ...

  2. AngularJs学习笔记-AngularJS权威教程学习笔记

    AngularJS是什么? AngularJS是一种构建动态Web应用的结构化框架.主要用于构建单页面Web应用, 增加抽象级别,使构建交互式的现代Web应用变得更加简单. AngularJS使开发W ...

  3. angularjs探秘<二>表达式、指令、数据绑定

    距离第一篇笔记好久了,抽空把angular的笔记梳理梳理. ng-init:初始化指令,这里可以声明变量,且变量不用指定数据类型(类似js中的var用法). 数值变量与字符串相加默认做字符串拼接运算. ...

  4. [未读]angularjs权威教程

    正在啃,赶脚不错...

  5. AngularJS入门心得2——何为双向数据绑定

    前言:谁说Test工作比较轻松,最近在熟悉几个case,差点没疯.最近又是断断续续的看我的AngularJS,总觉得自己还是没有入门,可能是自己欠前端的东西太多了,看不了几行代码就有几个常用函数不熟悉 ...

  6. angular4.0中form表单双向数据绑定正确姿势

    issue:用[(ngModel)]="property"指令双向数据绑定,报错. reason1:使用ngModel绑定数据需要注入FormsModule模块,在app.modu ...

  7. Vue指令之`v-model`和`双向数据绑定

     v-bind 只能实现数据的单向绑定,从 M 自动绑定到 V, 无法实现数据的双向绑定 <input type="text" v-bind:value="msg& ...

  8. Vue学习笔记【7】——Vue指令之v-model和双向数据绑定

    v-model是唯一可以实现双向数据绑定的vue指令 单向数据绑定:修改内存中的数据,页面上同步更改.v-bind <!-- v-bind 只能实现数据的单向绑定,从 M 自动绑定到 V, 无法 ...

  9. 怎样在 Vue 中使用 v-model 实现双向数据绑定?

    1. 所谓 双向数据绑定, 可以理解为: 修改 A , B 会跟着被修改, 修改 B , A 会跟着被修改. 常用在需要 进行用户输入的地方, 比如 这些 html 标签:  input.select ...

随机推荐

  1. 俄罗斯画师Mikhail Rakhmatullin作品

  2. hadoop2.7.3配置文件中过时的属性

    过时的属性:Deprecated Properties 该列表保存于:hadoop-2.7.3-src\hadoop-common-project\hadoop-common\src\site\mar ...

  3. Git 使用教程

    Git 使用教程 更详细请参考:廖雪峰的官方网站 - Git教程 1. 安装Git客户端软件 Git for Windows http://msysgit.github.io/ 2. 创建版本库 两点 ...

  4. [转] HashMap的存取之美

    本文转自 http://www.nowamagic.net/librarys/veda/detail/1202 HashMap是一种十分常用的数据结构,作为一个应用开发人员,对其原理.实现的加深理解有 ...

  5. 底部漂浮DIV

    .buttonDiv{background-color: #4e4f50; border: 2px solid #83ABD3; border-radius: 4px; -khtml-opacity: ...

  6. OpenCV学习笔记（一）——OpenCV安装

    1.无脑安装以下安装文件 cn_visual_studio_2010_ultimate_x86_dvd_532347.iso 2.测试Hello OpenCV 文件→新建→项目 win32应用程序→下 ...

  7. Security » Authorization » 通过映射限制身份

    Limiting identity by scheme¶ 通过映射限制身份(这部分有好几个概念还不清楚,翻译的有问题) 36 of 39 people found this helpful In so ...

  8. 构建高可用集群Keepalived+Haproxy负载均衡

    重点概念vrrp_script中节点权重改变算法vrrp_script 里的script返回值为0时认为检测成功,其它值都会当成检测失败:weight 为正时,脚本检测成功时此weight会加到pri ...

  9. GO语言学习

    1. 语言特色 可直接编译成机器码,不依赖其他库,glibc的版本有一定要求,部署就是扔一个文件上去就完成了. 静态类型语言,但是有动态语言的感觉,静态类型的语言就是可以在编译的时候检查出来隐藏的大多 ...

  10. H5 学习笔记（一、关于position定位）

    主要是relative与absolute的用法: 1.relative 依据left right top bottom 等属性在正常文档流中脱离位置,即相对于他的正常文档流位置进行移动.两个都为rel ...