附上前端测试页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>angular</title>
<script src="/static/angular/angular.js-1.7.6/angular.min.js"></script>
</head>
<body ng-app="myApp">
<!--E: 代表Element元素,以HTML的标签形式显示值-->
<shu-lin></shu-lin>
<!--A:代表Attribute属性,以成为一个标签的属性来显示值-->
<p shu-lin></p>
<!--C:代表Class类选择器,以成为选择器的名字来显示值-->
<p class="shu-lin"></p>
<!--其中的EA是restrict默认自带的,C必须要手动加上去才能生效-->
<!--<P>hello world !</p> template中在你输入的内容外面必须要加一个标签,不管啥标签,不然不能显示值-->
<script>
var app = angular.module("myApp", []);
app.directive("shuLin", function() {
return {
restrict : "EAC",
template : "<P>hello world !</p>"
};
});
</script>
</body>
</html>
附上控制台的Elements打印的效果