<!DOCTYPE html>

 <html ng-app="app">

     <head>

         <meta charset="utf-8">

         <title></title>

         <script type="text/javascript" src="../js/angular-1.2.16.js" ></script>

     </head>

     <body ng-controller="dirCtr">

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

         <div my-directive some-attr="{{myUrl}}" my-link-text="click here"></div>

     </body>

     <script type="text/javascript">

         var app=angular.module("app",[]);

         app.directive("myDirective",function(){

             return{

                 restrict:"A",

                 replace:true,

                 scope:{

                     myUrl:'@someAttr',

                     myLinkText:'@myLinkText1'

                 },

                 template:'<div><input type="text" ng-model="myUrl" /><a href="{{myUrl}}">{{myUrl}}</a></div>'

             };

         });

         app.controller("dirCtr",function($scope){

             $scope.myLinkText="baidu";

         });

     </script>

 </html>

当你改变上面的输入框时,下面的输入框跟着变,但是当你改变下面的输入框时,上面的输入框不跟真变.

原因是参数scope造成了了指令的一个局部区域.

那么怎么才能输入下面的文本框,上面的也跟着变呢.

看下面的代码.

 <!DOCTYPE html>

 <html ng-app="app">

     <head>

         <meta charset="utf-8">

         <title></title>

         <script type="text/javascript" src="../js/angular-1.2.16.js" ></script>

     </head>

     <body>

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

         <div my-directive some-attr="theirUrl" my-link-text="click here"></div>

     </body>

     <script type="text/javascript">

         var app=angular.module("app",[]);

         app.directive("myDirective",function(){

             return{

                 restrict:"A",

                 replace:true,

                 scope:{

                     myUrl:'=someAttr',

                     myLinkText:'@'

                 },

                 template:'<div><input type="text" ng-model="myUrl" /><a href="{{myUrl}}">{{myUrl}}</a></div>'

             };

         });

     </script>

 </html>

帅呆了,酷毙的双向绑定.

angularJs自定义指令时的绑定的更多相关文章

  1. AngularJs自定义指令详解（1） - restrict

    下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...

  2. angularJS自定义指令间的“沟通”

    由此例子我们可以看出,angularJS使用指令时link的执行顺序<html> <head> <meta charset="utf-8"/> ...

  3. AngularJS: 自定义指令与控制器数据交互

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 浅析AngularJS自定义指令之嵌入(transclude)

    AngularJS自定义指令的嵌入功能与vue的插槽十分类似,都可以实现一些自定义内容展现.在开始之前先简单介绍下自定义指令的transclude属性和AngularJS的内置指令ng-transcl ...

  5. angularjs自定义指令Directive

    今天学习angularjs自定义指令Directive.Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Adm ...

  6. angularJs 自定义指令传值---父级与子级之间的通信

    angularJs自定义指令用法我忽略,之前有写过,这里只说一下父子级之间如何传值: 例如: 模块我定义为myApp,index.html定义 <my-html bol-val="bo ...

  7. angularJS——自定义指令

    主要介绍指令定义的选项配置 //angular指令的定义,myDirective ,使用驼峰命名法 angular.module('myApp', []) .directive('myDirectiv ...

  8. AngularJS自定义指令directive：scope属性 （转载）

    原文地址:http://blog.csdn.net/VitaLemon__/article/details/52213103 一.介绍: 在AngularJS中,除了内置指令如ng-click等,我们 ...

  9. AngularJs自定义指令详解（6） - controller、require

    在前面文章中提到一旦声明了require,则链接函数具有第四个参数:controller. 可见require和controller是配合使用的. 在自定义指令中使用controller,目的往往是要 ...

随机推荐

  1. postfix

    http://www.postfix.org/ All programmers are optimists -- Frederick P. Brooks, Jr. 所有程序员都是乐天派

  2. linux服务之drbd

    http://www.drbd.org/docs/about/http://oss.linbit.com/drbd/ 一般我们会在生产环境的MYSQL中用drbd +ha做master 备份,当然这是 ...

  3. wikioi 1202 求和(求n个数的和)

    /*============================================================= 1202 求和 题目描述 Description 求n个数的和 输入描述 ...

  4. sitemesh使用步骤

    使用sitemesh的步骤 1. 添加jar文件到classpath 2. 在web.xml中增加过滤器 <!-- Sitemesh --> <filter> <filt ...

  5. excel 组及分级显示制作教程

    1.思路:利用“组及分级显示”功能,将每一个项目作为“摘要行”,将需要被“收起”或“展开”的内容,也就是项目所包含的内容作为“明细数据行.2.制作方法: 方法1:使用手工“组合”例如下图中,A2代表的 ...

  6. SPOJ #500. Turbo Sort

    Sorting is not an out-dated topic. My own in-place qsort got TLE... so, I simply called stl::sort() ...

  7. 轻量级开源内存数据库SQLite性能测试

    [IT168 专稿]SQLite是一款轻型的数据库,它占用资源非常的低,同时能够跟很多程序语言相结合,但是支持的SQL语句不会逊色于其他开源数据库.它的设计目标是嵌入式的,而且目前已经在很多嵌入式产品 ...

  8. bzoj1536: [POI2005]Akc- Special Forces Manoeuvres

    Description 在一次军事行动中有一批空降兵要降落在沙漠中拆除炸弹. 空降兵按照预定的顺序跳伞并降落到指定的位置.一旦降落他们便呆在原地不动了. 每个空降兵都有一个生存半径. 如果炸弹与他的距 ...

  9. bzoj4561: [JLoi2016]圆的异或并

    Description 在平面直角坐标系中给定N个圆.已知这些圆两两没有交点,即两圆的关系只存在相离和包含.求这些圆的异或面 积并.异或面积并为:当一片区域在奇数个圆内则计算其面积,当一片区域在偶数个 ...

  10. [git]Git与Repo入门

    转自:http://www.cnblogs.com/angeldevil/archive/2013/11/26/3238470.html 注:非常推荐的一篇关于git的博文 目录: 版本控制 一.原始 ...