您的位置：首页 > Web前端 > AngularJS

angularJs自定义指令时的绑定

2015-08-22 14:43 796 查看

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航