angularJS 之Directives

The restrict option is typically set to:

'A' - only matches attribute name
'E' - only matches element name
'AE' - matches either attribute or element name

Let's change our directive to use restrict: 'E':

 index2.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5 </head>
 6 <body>
 7 <div ng-app="superhero">
 8     <superman></superman>
 9 </div>
10 <script src="../angular-1.0.1.min.js"></script>
11 <script src="main2.js"></script>
12 </body>
13 </html>

main2.js

1 var app=angular.module('superhero',[]);
2 app.directive('superman',function(){
3    return{
4        restrict:"E",
5        template:"<div>Here I am to save the day</div>"
6    }
7 });

Let's change our directive to use restrict: 'A':

 index2.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5 </head>
 6 <body>
 7 <div ng-app="superhero">
 8    <div superman></div>
 9 </div>
10 <script src="../angular-1.0.1.min.js"></script>
11 <script src="main2.js"></script>
12 </body>
13 </html>

main2.js

1 var app=angular.module('superhero',[]);
2 app.directive('superman',function(){
3    return{
4        restrict:"A",
5        link:function(){alert("I'm working")}6    }
7 });

Let's change our directive to use restrict: 'C':

 index2.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5 </head>
 6 <body>
 7 <div ng-app="superhero">
 8    <div class="superman"></div>
 9 </div>
10 <script src="../angular-1.0.1.min.js"></script>
11 <script src="main2.js"></script>
12 </body>
13 </html>

main2.js

1 var app=angular.module('superhero',[]);
2 app.directive('superman',function(){
3    return{
4        restrict:"C",
5        link:function(){alert("I'm working")}
6    }
7 });

 index.html
 1 <!doctype html>
 2 <html ng-app="docsRestrictDirective">
 3   <head>
 4     <script src="http://code.angularjs.org/1.2.7/angular.min.js"></script>
 5     <script src="script.js"></script>
 6   </head>
 7   <body>
 8     <div ng-controller="Ctrl">
 9       <my-customer></my-customer>
10     </div>
11   </body>
12 </html>

customer.html

Name: {{customer.name}} Address: {{customer.address}}

script.js

 1 angular.module('docsRestrictDirective', [])
 2   .controller('Ctrl', function($scope) {
 3     $scope.customer = {
 4       name: 'Naomi',
 5       address: '1600 Amphitheatre'
 6     };
 7   })
 8   .directive('myCustomer', function() {
 9     return {
10       restrict: 'E',
11       templateUrl: 'customer.html'
12     };
13   });

templateUrl:'my-customer.html'

template:'Name: {{customer.name}} Address: {{customer.address}}'

 1 <!DOCTYPE html>
 2  <html>
 3 <head>
 4          <title></title>
 5      </head>
 6  <body>
 7  <div ng-app="behaviorApp">
 8   <div enter leave>aaa</div>
 9     </div>
10  <script src="../angular-1.0.1.min.js"></script>
11  <script src="main3.js"></script>
12  </body>
13  </html>

main3.js

 1 /**
 2  * 
 3  */
 4 var app=angular.module('behaviorApp',[]);
 5  app.directive('enter',function(){
 6      return function(scope,element){
 7          element.bind("mouseenter",function(){
 8              console.info("I'm inside of you!");
 9          });
10      }
11  });
12 
13 app.directive('leave',function(){
14     return function(scope,element){
15         element.bind("mouseleave",function(){
16             console.info("I'm leaving on a jet plane!");
17         });
18     }
19 });

 1 <!DOCTYPE html>
 2  <html>
 3 <head>
 4          <title></title>
 5      </head>
 6  <body>
 7  <div ng-app="behaviorApp">
 8   <div enter="panel" leave>aaa</div>
 9     </div>
10  <script src="../angular-1.0.1.min.js"></script>
11  <script src="main3.js"></script>
12  </body>
13  </html>

 main3.js
 1 /**
 2  *
 3  */
 4 var app=angular.module('behaviorApp',[]);
 5  app.directive('enter',function(){
 6      return function(scope,element){
 7          element.bind("mouseenter",function(){
 8              element.addClass("panel");//添加
 9          });
10      }
11  });
12 
13 app.directive('leave',function(){
14     return function(scope,element,attrs){
15         element.bind("mouseleave",function(){
16           element.removeClass(attrs.enter);//arrts.enter===panel 移除
17         });
18     }
19 });

function link(scope, element, attrs) { ... } where:

scope is an Angular scope object.
element is the jqLite-wrapped element that this directive matches.
attrs is an object with the normalized attribute names and their corresponding values.