angularJs自定义指令时的绑定
2024-10-09 09:09:22
<!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>
帅呆了,酷毙的双向绑定.
最新文章
- NSXMLParser解析xml格式
- C# 得到sqlserver 数据库存储过程,触发器,视图,函数 的定义
- gerrit使用教程
- yii 使用 phpmailer发送邮件
- Sql Server 查看所有存储过程或视图的位置及内容
- iOS开发上架之itunes connect里app信息的编辑
- shell,python获取当前路径（脚本的当前路径） (aso项目记录)
- JeeSite数据分页与翻页
- 2111: [ZJOI2010]Perm 排列计数
- MySQL PID错误，Mysql server PID file could not be found!
- Java Swing 中使用 EventQueue
- ORACLE 导入的问题
- arrayfun用法（转）
- linux终端FQ
- sqldeveloper的安装及其使用教程
- 学习Spring Boot：（三）配置文件
- JS 对html标签的属性的干预以及JS 对CSS 样式表属性的干预
- 【IdentityServer4文档】- 整体情况
- Java 匿名内部类 只能访问final变量的原因
- 使用Visio画UML模型