angularJs自定义指令时的绑定

最新推荐文章于 2020-04-28 18:41:41 发布

刀尖的舞者

最新推荐文章于 2020-04-28 18:41:41 发布

阅读量67

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog.php?id=h1h20j202h1j&title=angularJs%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4%E6%97%B6%E7%9A%84%E7%BB%91%E5%AE%9A

版权

前端专栏收录该内容

280 篇文章 0 订阅

订阅专栏

 1 <!DOCTYPE html>
 2 <html ng-app="app">
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script type="text/javascript" src="../js/angular-1.2.16.js" ></script>
 7     </head>
 8     <body ng-controller="dirCtr">
 9         <input type="text" ng-model="myUrl" />
10         <div my-directive some-attr="{{myUrl}}" my-link-text="click here"></div>
11     </body>
12     <script type="text/javascript">
13         var app=angular.module("app",[]);
14         app.directive("myDirective",function(){
15             return{
16                 restrict:"A",
17                 replace:true,
18                 scope:{
19                     myUrl:'@someAttr',
20                     myLinkText:'@myLinkText1'
21                 },
22                 template:'<div><input type="text" ng-model="myUrl" /><a href="{{myUrl}}">{{myUrl}}</a></div>'
23                 
24             };
25         });
26         app.controller("dirCtr",function($scope){
27             $scope.myLinkText="baidu";
28         });
29     </script>
30 </html>

当你改变上面的输入框时,下面的输入框跟着变,但是当你改变下面的输入框时,上面的输入框不跟真变.

原因是参数scope造成了了指令的一个局部区域.

那么怎么才能输入下面的文本框,上面的也跟着变呢.

看下面的代码.

 1 <!DOCTYPE html>
 2 <html ng-app="app">
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script type="text/javascript" src="../js/angular-1.2.16.js" ></script>
 7     </head>
 8     <body>
 9         <input type="text" ng-model="theirUrl" />
10         <div my-directive some-attr="theirUrl" my-link-text="click here"></div>
11     </body>
12     <script type="text/javascript">
13         var app=angular.module("app",[]);
14         app.directive("myDirective",function(){
15             return{
16                 restrict:"A",
17                 replace:true,
18                 scope:{
19                     myUrl:'=someAttr',
20                     myLinkText:'@'
21                 },
22                 template:'<div><input type="text" ng-model="myUrl" /><a href="{{myUrl}}">{{myUrl}}</a></div>'
23                 
24             };
25         });        
26     </script>
27 </html>