1:標(biāo)簽方法 app.directive ("標(biāo)簽名",function(){ 方法 });
PS:1.通過directive關(guān)鍵字先定義一個(gè)模塊。
PS:2.通過restrict關(guān)鍵字設(shè)定為"E"等恐,代表匹配標(biāo)簽。
PS:3.通過template關(guān)鍵字設(shè)定模板內(nèi)容同欠。
<!doctype html>
<html ng-app = "myapp" >
<head>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-controller = "Test">
<div>
<b>模塊化</b>
</div>
</body>
<script>
var app = angular.module('myapp', []);
app.controller("Test", function($scope){
});
app.directive ("div",function(){
var direction = {};
direction.restrict = "E";
direction.template ="模板指令";
return direction;
});
</script>
</html>
2:屬性方法 app.directive ("屬性名",function(){ 方法 });
PS:1.通過directive關(guān)鍵字先定義一個(gè)模塊撤逢。
PS:2.通過restrict關(guān)鍵字設(shè)定為"A"互例,代表匹配屬性糊秆。
PS:3.通過template關(guān)鍵字設(shè)定模板內(nèi)容夫偶。
<!doctype html>
<html ng-app = "myapp" >
<head>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-controller = "Test">
<ul a="">
<b>模塊化</b>
</ul>
</body>
<script>
var app = angular.module('myapp', []);
app.controller("Test", function($scope){
});
app.directive ("a",function(){
var direction = {};
direction.restrict = "A";
direction.template ="模板指令";
return direction;
});
</script>
</html>
上述兩個(gè)方法PS:
directive 模塊方法關(guān)鍵字。
direction.restrict = "AE"; 可以同時(shí)使用標(biāo)簽和屬性。
direction.templateUrl ="路徑/文件名";
direction.template = '<div>模板內(nèi)容</div>';
3:定義一個(gè)標(biāo)簽直接引用進(jìn)來舶沿。
<!doctype html>
<html ng-app = "myapp" ng-controller = "Test">
<head>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body >
<username>
模塊化
</username>
</body>
<script>
var app = angular.module('myapp', []);
app.controller("Test", function($scope){
});
app.directive ("username",function(){
var direction = {};
direction.restrict = "AE";
direction.template = '<div><lable>我是模板內(nèi)容</lable></div>';
return direction;
});
</script>
</html>