angularJs自定义指令时的绑定
<!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自定义指令时的绑定的更多相关文章
- AngularJs自定义指令详解（1） - restrict
下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...
- angularJS自定义指令间的“沟通”
由此例子我们可以看出,angularJS使用指令时link的执行顺序<html> <head> <meta charset="utf-8"/> ...
- AngularJS: 自定义指令与控制器数据交互
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 浅析AngularJS自定义指令之嵌入(transclude)
AngularJS自定义指令的嵌入功能与vue的插槽十分类似,都可以实现一些自定义内容展现.在开始之前先简单介绍下自定义指令的transclude属性和AngularJS的内置指令ng-transcl ...
- angularjs自定义指令Directive
今天学习angularjs自定义指令Directive.Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Adm ...
- angularJs 自定义指令传值---父级与子级之间的通信
angularJs自定义指令用法我忽略,之前有写过,这里只说一下父子级之间如何传值: 例如: 模块我定义为myApp,index.html定义 <my-html bol-val="bo ...
- angularJS——自定义指令
主要介绍指令定义的选项配置 //angular指令的定义,myDirective ,使用驼峰命名法 angular.module('myApp', []) .directive('myDirectiv ...
- AngularJS自定义指令directive：scope属性 （转载）
原文地址:http://blog.csdn.net/VitaLemon__/article/details/52213103 一.介绍: 在AngularJS中,除了内置指令如ng-click等,我们 ...
- AngularJs自定义指令详解（6） - controller、require
在前面文章中提到一旦声明了require,则链接函数具有第四个参数:controller. 可见require和controller是配合使用的. 在自定义指令中使用controller,目的往往是要 ...
随机推荐
- Ext is not defined
最近由于项目设计到Extjs所以也准备研究一下,可是谁知道刚写好一个demo,运行的时候死活出不来界面,于是用firebug看了一下,出现:Ext is not defined,因为刚开始学也不知道是 ...
- flex html 用flex展示html
1. 目的 flex展示html 可以保护网页内容 2. 参考 http://stackoverflow.com/questions/260270/display-html-in-an-actions ...
- CSharp 如何通过拼接XML调用存储过程来查询数据
每查询数据,需要访问一次数据库,这样会影响性能:如果把查询的数据拼接成XML形式,作为一个参数整体传给存储过程来处理,这只访问数据库一次,执行速度会快很多. 1.C#代码如下: /// <sum ...
- C# 如何通过拼接XML调用存储过程来优化系统性能
平常新增多条记录,需要多次访问数据库,这样会影响性能:如果把新增的数据拼接成XML形式,作为参数传给存储过程来处理,这只访问数据库一次,执行速度会快很多. 1.C#代码如下:XML拼接的字段不能出现& ...
- Nginx出现413 Request Entity Too Large错误解决方法
Nginx出现的413 Request Entity Too Large错误,这个错误一般在上传文件的时候出现,打开nginx主配置文件nginx.conf,找到http{}段,添加 解决方法就是 打 ...
- 【并发编程】AQS学习
一个简单的示例: package net.jcip.examples; import java.util.concurrent.locks.*; import net.jcip.annotations ...
- FDATool使用
1. 幅值有两种单位可选,linear和db.切换单位时Toolbox的图例会跟着变化,可以看出两种单位下参数含义不太一样. 线性坐标:例如设置为0.01/0.01,表示通带幅度0.99~1.01,阻 ...
- php 根据指定的键对多维数组进行排序
根据指定的键对多维数组排序,可以按照多个键排序 我们通常有一些多维数组需要排序: $guys = array( array( 'name' => 'jake', 'score' => 80 ...
- java ScriptEngine 使用 （支持JavaScript脚本，eval()函数等）
Java SE 6最引人注目的新功能之一就是内嵌了脚本支持.在默认情况下,Java SE 6只支持JavaScript,但这并不以为着Java SE 6只能支持JavaScript.在Java SE ...
- 95. Unique Binary Search Trees II
Given an integer n, generate all structurally unique BST's (binary search trees) that store values 1 ...