AngularJS 指令中的属性的绑定方式

最新推荐文章于 2021-01-26 15:14:03 发布

weixin_34343000

最新推荐文章于 2021-01-26 15:14:03 发布

阅读量359

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/2391658/blog/846707

本文详细介绍了AngularJS中指令的三种属性绑定方式：@、= 和 &，并通过实例展示了如何使用这些绑定方式实现数据双向绑定及方法调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

angularjs 指令的属性绑定方式有三种表示方式：@ ，=，&

1：先说指令域scope的@

我觉得描述很费劲，直接用代码来阐述：

<!doctype html>  
<html ng-app='myApp'>   
 <head>     
  
 </head>   
 <body>       
    
 <div ng-controller="listCtrl">     
    <input type="text"  ng-model="t" />  
     <kid title="{{t}}" >  //这个必须指定的，这里的title是指令里scope的@对应的，t就是控制域scope下的  
        <span>我的angularjs</span>  
    </kid>  
</div>   
<script type="text/javascript" src="angular.js"></script>  
<script type="text/javascript" src="main05.js"></script>  
</body></html>

main05.js

var myApp=angular.module('myApp',[]);  
myApp.controller('listCtrl',function($scope){  
   $scope.logchore="motorola";  
});  
  
  
myApp.directive('kid',function(){  
    return {  
        'restrict':'E',  
        scope:{  
            title:"@"  
        },  
        template:'<div >{{title}}</div>'  
          
    }  
});  
在输入框输入数字会绑定到指令模板的title中。

2：再说说Scope的 =

<!doctype html>  
<html ng-app='myApp'>   
 <head>     
  
 </head>   
 <body>       
    
 <div ng-controller="listCtrl">     
    <input type="text"  ng-model="t" />  
     <kid title="t" > //和上面相比，这个直接赋值等于scope域下的t了  
        <p>{{title}}</p>  
        <span>我的angularjs</span>  
    </kid>  
</div>   
<script type="text/javascript" src="angular.js"></script>  
<script type="text/javascript" src="main05.js"></script>  
</body></html>

main05.js代码如下：

var myApp=angular.module('myApp',[]);  
myApp.controller('listCtrl',function($scope){  
   $scope.logchore="motorola";  
});  
  
  
myApp.directive('kid',function(){  
    return {  
        'restrict':'E',  
        scope:{  
            title:"="  
        },  
        template:'<div >{{title}}</div>'  
          
    }  
});

3：最后说&，这个是用来方法调用的

<!doctype html>  
<html ng-app='myApp'>   
 <head>     
  
 </head>   
 <body>       
    
 <div ng-controller="listCtrl">     
      <kid flavor="logchore()" ></kid> //先比=，函数赋值的形式，而logchore函数必须是域scope下声明的函数  
</div>   
<script type="text/javascript" src="angular.js"></script>  
<script type="text/javascript" src="main05.js"></script>  
</body></html>

main05.js代码如下：

var myApp=angular.module('myApp',[]);  
myApp.controller('listCtrl',function($scope){  
   $scope.logchore=function(){  
        alert('ok');  
   };  
});  
  
  
myApp.directive('kid',function(){  
    return {  
        'restrict':'E',  
        scope:{  
            flavor:"&"    
        },  
        template:'<div ><button ng-click="flavor()"></button></div>'  
          
    }  
});

如果logchore带有参数，

<!doctype html>  
<html ng-app='myApp'>   
 <head>     
  
 </head>   
 <body>       
    
 <div ng-controller="listCtrl">     
  
      <kid flavor="logchore(t)" ></kid>   
  
</div>   
<script type="text/javascript" src="angular.js"></script>  
<script type="text/javascript" src="main05.js"></script>  
</body></html>

main05.js代码如下：

var myApp=angular.module('myApp',[]);  
myApp.controller('listCtrl',function($scope){  
   $scope.logchore=function(x){  
        alert(x);  
   };  
});  
  
  
myApp.directive('kid',function(){  
    return {  
        'restrict':'E',  
        scope:{  
            flavor:"&"  
        },  
        template:'<div >    <input type="text"  ng-model="v" /> <button ng-click="flavor({t:v})"></button></div>'  
          
    }  
});

转载于:https://my.oschina.net/u/2391658/blog/846707