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':
1.
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 });
2.
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 });
3.
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 });
4.
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}}'
5.
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 });
6.
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:
scopeis an Angular scope object.elementis the jqLite-wrapped element that this directive matches.attrsis an object with the normalized attribute names and their corresponding values.