1. 程式人生 > >AngularJS 指令中的屬性的繫結方式

AngularJS 指令中的屬性的繫結方式

指令域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中。