在《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,iVBORw0KGgoAAAANSUhEUgAAAdoAAABzCAIAAACw4lRqAAAJxklEQVR4nO3dPW67wBaHYXZEk+1QZTUUWcnNlZCushOq9P82iaJIKbkFBubjnGH4MgfnfeQisTEMHvPz5DAxRQf8Aa+vr//w79/r6+vZXQFVcXYDgHsgjnvEsWXEMf6EVwzO7gqoiGMAMIE4BgATiGMAMIE4BgATiGMAMIE4BgATiGMAMIE4BgATiGMAMIE4PsF//vs/ble8nf3GwYMjjk/AgX1F9BqORhyfgAP7iug1HI04PgEH9hXRazhabhy3dVkUZd0u3sDqJ95BW5dFURRFUTXZ7ZxZrqn61SVxYF8RvYajTXHcVIWsrNu7xXFTSQu3delkXNxQL/6yN+gnJ3GMNHoNR5NGx376OfcdP8jNjuOpef0QN/g9N1fnglN5GnH8B9FrONr14zh8mDjGIeg1HG1pHDuVgiCTxkKs/5AXX7ewuq1ESK31cTw+KyeOg3pH1QhPy9mfYLnh9bk1rqniV6nrOg7sa6LXcLRFcezEYBA1Xkjpv9xiMD24XBzHG4rAWo0jc3+ClyF4kYjjh0Kv4WjL4ti5042lKAGdVI3jOBWVK+I4TOcd4jh3f+JNRS+TiAP7iug1HG197XiKKCWV+jVIxQq9OStmVoSLb4/j3P2RtkTt+GHRazjatjjul3KrrFFOHhTHej1gpzjO2B/pdSKOHxa9hqPtFsdaBC2P43iBVLFCPrW2PY4z9ofR8Z9Cr+Foe8RxMr+WxbE4PA5WP1Ms3qt2nLE/8e70hRTi+BHRazjaLnEsTbTQZ1akwyo6GRbVI5QQlKc+zGxIm1mRuT99Y/1nMbPiQdFrONpOcdz5Z9hm5h3PNco/WRcGmrQSZ1QqVX6lTSbjOHN/gs1VzVxhu8eBfUX0Go7GN7qdgAP7iug1HI04PgEH9hXRazgacXwCDuwrotdwNOL4BBzYV0Sv4WjE8Qk4sK+IXsPRiOMTnH5FZG7rbme/cfDgiOOVTo8GbutuZ79xABVxvBIH9hXRa7CMOF6JA/uK6DVYRhyvxIF9RfQaLDMbx6suzpf5T9hzy+WshgP7ilb0Wlt/FsXn8CUl32XxUda/yWf8VMVHUf2sayGsaL6K4mP5xTQ38eI4vAJT4Pbw4hbmfImxvDEljoMvoJ8aRRwjKdVr7XdZfBTDzfkG18vF8U8138j72KclTTX1y9QXR7MRx2VZylE0E9a6Y+J4ywtFHP9RWq/1B7x/AcaP4dtjPxdGwNlxnPWZcZGWNF9F+GL+1uVdUtJGHFd1XUo52FRFWVXJCFX8pTh+ey6eXt7Xtyzb3Tb0UMRea6qPovjSups4Pq0l7Xd590CcGInjphXyuK3L2yN6XUBLsYw4voVv0w/Ay7pdF8fRA+7XXzorSy1X1m34zfrStpwD203G/JTUlgzuz1wMWYQ4njvmZ4oVToljuN+P4358J8X9sOafyl/D9Ld5+e2//6cltc8P/+96t6nuc+ci8tbmfsmfugxa8luXzlaUD57NLfmty7xPNaXKlLc559Hyu3H7Oorjtv7MfQHXkuK4jytvt/o09iI0ijQ5ddUH4jj21rdDHMffFC9/77L/vcR+U46LYw1xfKA4jtv6MzE07pJx3B+fzvvtu+k6L477pAhT1V3zFKxjfsmx7v+aGtErnxnTPX2rlKQLdurWqmkXpFYpO7ipJZlD4yA0m68iWr+6ueDX24eQHMfLTyGsIcdxmMdN1ceVF6FBKKppnB/H0Xg1+1Se8BEhfp+8cFUl5brRucWK95ensRXPb31Kvjz3vzt5+fbsLDTc0z/+9lw8vbz1qxnWIMRxejFkieO4qfQ06boucRyqx+QYWMmoioIvzm43c8P8TaRV2LDfaHibqMDElRZvL4SPgcQf9Vta0nxl1IiEupDTwpnNxfvSVEocR309+7ZZR4njzitYDGkc1HujcFYSLL9YEWbihtGxssao0rL2+qP66HhI3Lfn4af3l6dhifeXp+nhMWfd5E7EcWIxZNkzjtW86DPiuy5TJelwzcMT3WPeGbnLKSkP0KQhYbikluZCtrqhJpbFj2uJ9/J61Y++DeInwfjEmc0J+9IqxYr4M2P2j6p1tDh28thJZumCRlPAaQF2XhzH+jXOXHZ1WxxHP08R3Dm/+MNetTqRuRiyyHG8qlihH5BTOXLuspAL4zi+6X/mByEYtkQb2gufMWEcy+XX3VuiDv+dzYmfiGOMzmxO2JdkHMev//5T7tQ4HhP2VjYWFkgVm11yut0jjlMfEIeNjqOfp0KFW68gjk8gnMqbO4GejOPU3/vx5LnUmocnJuI4t1j5GKNjNeWDOL7b6Hj/sXAsEcd9xlZu0EYZd7sjmcby8Fioe+wax8k8ji4w6i3nXAdVtzCOx9FxFz0rzlln6anOQRzvQJroJlQYXRtqx/0MBHUMtSSOlxQrcyu2Ur5oU0dmasfKPm5pifqB58aoUju+bSK9ufhRv7+i2vEdJr2l4ji8br0YcU1VlKU4UTlccXTZ6cT1mXeI42gjbV2KMyuCvRzOEy6aWRGfoHN/dmrHXff+8uzHaxis7u/OM4njHSizxftSQHhWR6gb+vkSjH+FmRXSmkeL4jiahPBTqeO1KKTS8w18/k4Nc9rG2BKakZiOtqklY2OEj4dhneHp0EUTLfz/MRkqEvLMCu8sX9e19ecdZ1Y4d7iRqBZaM75cwp8OETzhkDgONpqYd+wWmqsmLkGn43icXRFMeIhO8XnzLdQ4jmZrxGsTn4V5if+lDOqDmTOcpLmo0lQwaWy1LI6HrafnHd8ME4fDOV55RW3npNln3cajyDVTmNe1JF5e2KIzS1oYTac3582w/tWKFdHLcpd5x6voE9weGv8kfUX02nLZ/45xfXerEWs2x/FM2fhhcWBfUdxr0hlzbtxyb/u+PzfG8R8dGnfE8TXRa7PGonnXdbP/yXJtzZc76g+qw6dYHcerv9/tQXBgXxG9liHrKykeg3/C4MwyRc/s189bx4F9RfQaLCOOVzr9isjc1t3OfuMAKuIYAEwgjgHABOIYAEwgjgHABOIYAEwgjgHABOIYAEwgjgHABOIYAEwgjgHABOIYAEwgjgHABOIYAEwgjgHABOIYAEwgjgHABOIYAEwgjgHABOIYAEwgjgHABOIYAEwgjgHABOIYAEwgjgHABOIYAEwgjgHABOIYAEwgjgHABOIYAEwgjgHABOIYAEwgjgHABOIYAEwgjgHABOIYAEwgjgHABOIYAEwgjgHABOIYAEwgjgHABOIYAEwgjgHABOIYAEwgjgHABOIYAEwgjgHABOIYAEwgjgHABOIYAEwgjgHABOIYAEwgjgHABOIYAEwgjgHABOIYAEwgjgHABOIYAEz4P8PmhNvx1WhHAAAAAElFTkSuQmCC" 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. 【leetcode❤python】 155. Min Stack

    #-*- coding: UTF-8 -*- class MinStack(object):    def __init__(self):        """      ...

  2. SLES 10安装Oracle10gR2笔记

    SLES 10安装Oracle10gR2笔记 一. 数据库安装 . 安装C/C++ Compiler gcc --version验证是否安装 . 验证Service Pack版本 SPident –v ...

  3. push_back模式工作

    自己决心今天做一个 xxx项目,写完xxx功能. 早晨9点多张三说:“A项目有一个 bug要修复”,估计十分钟就修复了,然后放弃手头项目去搞.修复这个bug的时候,发现这个A项目有些代码还有可以优化的 ...

  4. 浏览器中的Javascript的简单对话框

    简单对话框是指对话框不去做设计,而直接使用默认的,如alert.confirm.prompt: <html> <head> <meta http-equiv=" ...

  5. iframe在浏览器中session失效问题

    iis中右击项目属性http头 添加一个http头 X-UA-Compatible 自定义http头值 IE=EmulateIE7 这样设置后就可以了

  6. （原创）QuartusII设置虚拟引脚（Virtual Pin）

    方法一: 在Quartus II中Assignments->Assignment Editor, 在Category栏选择logic options, 到列表中To列下添加要设置的引脚接口,如果 ...

  7. iOS - iOS 应用

    1.Xcode 项目属性 Product Name 软件名称.产品名称.项目名称 Organization Name 公司名称.组织名称 Organization Identifier 公司的唯一标识 ...

  8. 在控制台启动服务器时出现：对于服务器soa1_wls, 与计算机oim1相关联的节点管理器无法访问。

    问题:在控制台启动服务器时出现:对于服务器soa1_wls, 与计算机oim1相关联的节点管理器无法访问.原因:nodemanager没有启起来解决方法: 一.对于managedServer于admi ...

  9. iOS开发 QQ粘性动画效果

    QQ(iOS)客户端的粘性动画效果 时间 2016-02-17 16:50:00  博客园精华区 原文  http://www.cnblogs.com/ziyi--caolu/p/5195615.ht ...

  10. JSONObject,JSONArray,Map,String之间转换

    http://blog.csdn.net/superit401/article/details/51727739 1.String转JSONObject String jsonMessage = &q ...