<!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. Q7: Unique Binary Search Trees

    问题描述: Given n, how many structurally unique BST's (binary search trees) that store values 1...n? For ...

  2. 【转】javascript入门系列演示·三种弹出对话框的用法实例

    对话框有三种 1:只是提醒,不能对脚本产生任何改变: 2:一般用于确认,返回 true 或者 false ,所以可以轻松用于 if...else...判断 3: 一个带输入的对话框,可以返回用户填入的 ...

  3. nginx-gridfs使用

    安装nginx及nginx-gridfs 依赖库.工具   # yum -y install pcre-devel openssl-devel zlib-devel # yum -y install ...

  4. 【转】PHP简单拦截器的实现

    最近在看Yii的源代码,收获了不少,这里就是从中得到的启发,而写的一个简单拦截器的实现下面看例子: <?phpclass A{    private $_e = array();       p ...

  5. 【redis】 linux 下redis 集群环境搭建

    Redis集群 (要让集群正常工作至少需要3个主节点,在这里我们要创建6个redis节点,其中三个为主节点,三个为从节点,对应的redis节点的ip和端口对应关系如下) 127.0.0.1:63791 ...

  6. 内容模块PC标签调用说明

    内容模块 模块名:content 模块提供的可用操作 操作名 说明 lists 内容数据列表 relation 内容相关文章 hits 内容数据点击排行榜 category 内容栏目列表 positi ...

  7. thinkphp中redirect重定向后隐藏index.php

    首先,.htaccess文件要配置好隐藏index.php.系统默认生成的就行. 然后,也是最关键的一部,要在Application/Home/Conf里的config.php文件中增加如下配置: & ...

  8. 使用Maven Profile实现多环境构建

    在开发过程中,我们的软件会面对不同的运行环境,比如开发环境.测试环境.生产环境,而我们的软件在不同的环境中,有的配置可能会不一样,比如数据源配置.日志文件配置.以及一些软件运行过程中的基本配置,那每次 ...

  9. php获取一年中某一周的开始和结束时间

    PHP来获取一年中的每星期的开始日期和结束日期的代码 函数get_week()通过传入参数$year年份,获取当年第一天和最后一天所在的周数,计算第一周的日期,通过循环获取每一周的第一天和最后一天的日 ...

  10. Func系列4：其他功能

    非Python API接口支持 Func通过非Python API实现远程调用,目的是为第三方工具提供调用及返回接口.Func使用func-transmit命令来实现,支持YAML.JSON格式,实现 ...