在《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. 话说C++中的左值、纯右值、将亡值

    写在前面 C++中有“左值”.“右值”的概念,C++11以后,又有了“左值”.“纯右值”.“将亡值”的概念.关于这些概念,许多资料上都有介绍,本文在拾人牙慧的基础上又加入了一些自己的一些理解,同时提出 ...

  2. JavaScript的chapterI

    JavaScript是一种由web浏览器进行解析和执行脚本语言,包括ECMAScript,DOM,BOM. JavaScript的最大作用是赋予页面动作,让页面动起来,已经动态的处理页面的数据. 应用 ...

  3. php保留键随机打乱数组顺序

    最近遇到一个需求,把一个数组随机打乱顺序,我们可以用php的shuffle函数,但是这个函数会把数组的键清空建立新的键,那么我们若想保留键只需要利用shuffle函数再做一下处理就可以了.可以自定义一 ...

  4. nignx 启动，重启命令

    1.查看进程号  ps -ef|grep nginx 强制停止 [root@LinuxServer ~]# pkill -9 nginx 重启 1.验证nginx配置文件是否正确 方法一:进入ngin ...

  5. 组合suan

    /// 求从数组a[1..n]中任选m个元素的所有组合. /// a[1..n]表示候选集,n为候选集大小,n>=m>0. /// b[1..M]用来存储当前组合中的元素(这里存储的是元素 ...

  6. React组件库

    图表组件库:Recharts(React和D3构建的图表库) UI组件库:react-bootstrap

  7. Java中List根据对象的属性值进行数据库group by功能的操作

    public class test { public static void main(String[] args) { List<Bill> list = new test().setO ...

  8. Nodejs学习总结

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效. 官网 : http://node ...

  9. session、cookie

    session:全局变量组 存放位置:存放在服务器上 用法:相当于一个变量的使用方法,存在于服务器内存上,抓取速度快 主界面: using System; using System.Collectio ...

  10. ROS学习笔记（四）——环境变量配置

    1.查看环境变量配置情况,其实并没有什么卵用 $ export | grep ROS 或者用 $ printenv | grep ROS2.配置环境变量??$ source /opt/ros/indi ...