在《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. XSS常用技巧

    一般发现一个xss漏洞后要做的基本上就是这些: 1. 伪造请求 使用$_REQUEST或$_GET 首先我们要找找该网站使用的程序是不是在网上能找到源码,如果能找到源码的话,就去分析后台管理员更改密码 ...

  2. 非root用户安装软件

    下面简要说一下Linux下非root用户安装软件的一般流程: 1. 获取源代码,一般是wget方式,ubuntu可以使用apt-get source来获取源代码. 2. 解压源代码,一般使用tar - ...

  3. $.inArray（）

    原文链接:http://www.css88.com/jqapi-1.9/jQuery.inArray/ jQuery.inArray( value, array [, fromIndex ] )返回: ...

  4. UGUI text image 等加Shadow OutLine等

    Text,文本控件,同NGUI中的Label.支持动态字库.大小调节.富文本(基本的html标签格式)等等.描边.阴影等需要Effect组件支持.Add Component-->UI--> ...

  5. 1奶茶店创业成本： 2发饰品加盟店创业成本 3眼镜行业店创业成本 从“程序员转行卖烧饼”想到IT人创业

    总结: -------奶茶店创业成本: 而这个奶茶店初期投资是:3万元加盟费+1万元保证金+8000装修+两万设备(冰柜.展示柜.收银机等等).别说赚钱,什么时候把初期投资赚回来呀! 一个店的利润就是 ...

  6. jq变态全选vs原生变态全选

    <script> $(function(){ var num=0; $("#btn").on('click',function(){ if(this.checked){ ...

  7. GoF--外观设计模式

    设计模式--外观模式Facade(结构型): 1. 概述 外观模式,我们通过外观的包装,使应用程序只能看到外观对象,而不会看到具体的细节对象,这样无疑会降低应用程序的复杂度,并且提高了程序的可维护性. ...

  8. JVM垃圾回收机制总结：调优方法

    转载: JVM垃圾回收机制总结:调优方法 JVM 优化经验总结 JVM 垃圾回收器工作原理及使用实例介绍

  9. CSS3 选择器——基本选择器

    CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器.那么从现在开始我们先丢开他们版本的区别, ...

  10. (转抄：人人都是产品经理——iamsujie)如何提高产品规划PPT的能力

    做产品几年之后,不可避免的要碰到写规划这件事儿,虽说不少人,不乏大牛,对规划持“无用论”的观点, 但大多数人其实还是更相信这个段子: 在一个公司里,看一个人的地位,主要看他平时写的文档类型——写wor ...