<!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. Daas

    联想到这些年遇到的各种客户使用桌面虚拟化的场景,深有感触.桌面虚拟化技术并不一定适合所有的用户和场景,也不仅仅只是技术方面的问题.加强安全的方法有千万种,为何此客户情守桌面虚拟化呢?某客户已经规模化实 ...

  2. c语言编程中%g是什么格式

    %g用来输出实数,它根据数值的大小,自动选f格式或e格式(选择输出时占宽度较小的一种),且不输出无意义的0.即%g是根据结果自动选择科学记数法还是一般的小数记数法 printf("%g\n& ...

  3. caller 属性和callee属性

    1.caller 属性 返回一个对函数的引用,即调用了当前函数的函数体. functionName.caller :functionName 对象是所执行函数的名称. 说明: 对于函数来说,calle ...

  4. 关于ttserver, mongodb, couchbase. ssdb ,tair, leveldb的一点使用体验

    2年前使用的ttserver,性能很高,支持分布式,但稳定性不足,当存储容量达到亿级的时间经常会出现无法插入的情况,而且不知道是什么原因造成的错误,重启后也无济于事,只好重启开新库. 单库写入性能 2 ...

  5. mysql ALTER COLUMN MODIFY COLUMN CHANGE COLUMN 区别及用法 (转)

    -- 设置或删除列的默认值.该操作会直接修改.frm文件而不涉及表数据.此操作很快 -- ALTER COLUMN ALTER TABLE  dsp_ad_center.XianDuan ALTER  ...

  6. 我对javascript的自以为是

    参数的作用域 if(true){ var tester = "Hello World"; } console.log(tester); 按照以往的经验,觉得上面的代码会报错,而实际 ...

  7. Android禁止横屏竖屏切换

    在Android中要让一个程序的界面始终保持一个方向,不随手机方向转动而变化的办法: 只要在AndroidManifest.xml里面配置一下就可以了. 在AndroidManifest.xml的ac ...

  8. Struts2 - Rest(2)

    (上篇:Struts2 - Rest(1)) 6) 加入user-index.jsp到/WEB-INF/content中: <%@ page language="java" ...

  9. js中的script标签

    在页面中用script标签引入javascript文件(<script type="text/javascript" src="js文件地址">&l ...

  10. bzoj2592: [Usaco2012 Feb]Symmetry

    Description After taking a modern art class, Farmer John has become interested in finding geometric ...