菜鸡学AngularJS 11 模块化 关键字 directiv
2016-07-28 本文已影响263人
菜鸡
1：标签方法 app.directive ("标签名",function(){ 方法 });
PS：1.通过directive关键字先定义一个模块。
PS：2.通过restrict关键字设定为"E"，代表匹配标签。
PS：3.通过template关键字设定模板内容。
<!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关键字先定义一个模块。
PS：2.通过restrict关键字设定为"A"，代表匹配属性。
PS：3.通过template关键字设定模板内容。
<!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>
上述两个方法PS：
directive 模块方法关键字。
direction.restrict = "AE"; 可以同时使用标签和属性。
direction.templateUrl ="路径/文件名";
direction.template = '<div>模板内容</div>';
3：定义一个标签直接引用进来。
<!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>我是模板内容</lable></div>';
return direction;
});
</script>
</html>
