欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

angularjs指令之绑定策略（@、=、&）

程序员文章站 2022-04-29 09:07:58
引入主题背景：angular 的指令配置中的template可以直接使用硬编码写相应的代码，不过也可以根据变量，进行动态更新。那么需要用到那些变量，因用法的不同，所以需要设...

引入主题背景：angular 的指令配置中的template可以直接使用硬编码写相应的代码，不过也可以根据变量，进行动态更新。那么需要用到那些变量，因用法的不同，所以需要设置合适的绑定策略。

1：先说指令域scope的@

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

angularjs.html

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

angularjs.html

<!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：最后说&，这个是用来方法调用的

angularjs.html代码如下：

<!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带有参数，

angularjs.html代码如下：

<!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>' 
   
 } 
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇： 浅谈Vue使用Elementui修改默认的最快方法

下一篇： angularjs+bootstrap菜单的使用示例代码

推荐阅读