demo.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS</title>
</head>
<body ng-app="App"> <!-- ng-app 指定模块 -->
<div tag></div> <!-- 当作属性来使用 -->
<tag></tag> <!-- 当作元素来使用 -->
<div class="tag"></div> <!-- 当作CSS类名来使用 -->
<!-- directive:tag --> <!-- 当作注释来使用 -->
<script src="angular.min.js"></script> <!-- 引入AngularJS框架 -->
<script>
// 创建模块
var App = angular.module('App',[]);
// 通过directive方法自定义指令
App.directive('tag',function() {
return { //返回一个对象,该对象是自定义指令相关的内容
restrict: 'ECMA',
//E:element(当作元素使用);
//A:attribute(当作属性使用);
//C:class(CSS类名);
//M:mark(备注、注释。replace必须设为true)
template: "<h1>hello angular</h1>",
//templateUrl: "./list.html", //相当于include(JS不能在客户端访问文件,必须通过服务器才能生效(通过Ajax请求))
replace: true // 替换tag作用的标签(默认false在tag标签下添加)
}
});
</script>
</body>
</html>