在《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. 设计一个泛型类Collection

    要求:设计一个泛型类Collection,它存储object对象的集合(在数组中),以及该集合当前的大小.提供public方法isEmtpy,makeEmpty,insert,remove,isPre ...

  2. 2-st学习笔记

    2-ST是一种巧妙的建图模式....其实,主要是将互相限制的条件转化为有向图.实现时,将每个点拆成两点,对应这个点的两种取值,然后求强连通分量.由于每个点只能有一种取值,所以若强连通分量中某一个点拆成 ...

  3. DateEdit控件的使用

    按照年月日时分秒显示时间 1. 设置Mask.EditMask和DisplayFormat,EditFormat属性,设置为一致:'yyyy-MM-dd HH:mm';  //按照想要的显示格式设置此 ...

  4. Ubuntu 16.04安装搜狗输入法

    转载: http://www.it610.com/article/5319575.htm 打开firefox浏览器,输入网址www.baidu.com,打开后搜索搜狗拼音 linux进入到搜狗拼音li ...

  5. jQuery.eq() 函数

    eq() 函数 获取当前对象中指定索引所对应的的元素 语法 $selector.eq(index)//index为指定索引,值为数字型 返回值 返回值为一个对象 实例说明 代码 <!DOCTYP ...

  6. VERY DEEP CONVOLUTIONAL NETWORKS FOR LARGE-SCALE IMAGE RECOGNITION 这篇论文

    由Andrew Zisserman 教授主导的 VGG 的 ILSVRC 的大赛中的卷积神经网络取得了很好的成绩,这篇文章详细说明了网络相关事宜. 文章主要干了点什么事呢?它就是在在用卷积神经网络下, ...

  7. Hibernate SQL方言 (hibernate.dialect) Spring配置文件applicationContext.xml

    转自:http://www.cnblogs.com/wj-wangjun/archive/2009/10/21/1587624.html Hibernate SQL方言 (hibernate.dial ...

  8. phpstorm取消强制换行

    1 取消phpstorm右侧竖线显示 2 取消格式化代码时 自动换行

  9. js加密解密

    <script> document.write("<xmp>"); document.write(function(p,a,c,k,e,r){}(''.sp ...

  10. C# 发送qq邮箱

    注意: QQ邮箱的简单邮件传输协议(SMTP)使用了SSL加密,必须启用SSL加密.指定端口. QQ邮箱POP3/SMTP服务默认是关闭的,需要开启服务(设置=>账户=>开启服务). QQ ...