<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS 自定义指令</title>
</head>
<!--内置指令就是AngularJS帮我们定义好的指令
自定义指令就是我们自己定义的指令
用法一样
-->
<body ng-app="App">
<tag></tag>
<div tag></div>
<div class="tag"></div>
<!-- 需要replace 为true -->
<!-- directive:tag -->
<script src="./libs/angular.min.js"></script>
<script>
var App = angular.module('App', []);
// 通过模块实例对象的directive方法可以自定义指令
App.directive('tag', function () {
// 返回与指令相关的内容
return {
// 规定指令的类型
// E ELEMENT 元素发生作用
// A attribute 属性发生作用
// C class 类名发生作用
// M mark 表标记发生作用
restrict: 'EACM',
//通过angular全局对象下的directive方法实现自定义指令。
//'ECMA 规定了指令的类型,可以写一个 也可以全部都写'
// 当有字符串定义模板时
// 要确保整个字符串有一个根元素
template: '<div><h1>hello world!</h1><small>123</small></div>',
// template: '<img ng-src="" src="">'
//这是在执行mark指令时执行的代码,
//template后面的值在 当执行mark指令并且 replace:true 时
//会替换掉div中的内容(tag会被解析为div)
replace: true,
// templateUrl: 'header.html'
}
});
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS 自定义指令</title>
</head>
<!--内置指令就是AngularJS帮我们定义好的指令
自定义指令就是我们自己定义的指令
用法一样
-->
<body ng-app="App">
<tag></tag>
<div tag></div>
<div class="tag"></div>
<!-- 需要replace 为true -->
<!-- directive:tag -->
<script src="./libs/angular.min.js"></script>
<script>
var App = angular.module('App', []);
// 通过模块实例对象的directive方法可以自定义指令
App.directive('tag', function () {
// 返回与指令相关的内容
return {
// 规定指令的类型
// E ELEMENT 元素发生作用
// A attribute 属性发生作用
// C class 类名发生作用
// M mark 表标记发生作用
restrict: 'EACM',
//通过angular全局对象下的directive方法实现自定义指令。
//'ECMA 规定了指令的类型,可以写一个 也可以全部都写'
// 当有字符串定义模板时
// 要确保整个字符串有一个根元素
template: '<div><h1>hello world!</h1><small>123</small></div>',
// template: '<img ng-src="" src="">'
//这是在执行mark指令时执行的代码,
//template后面的值在 当执行mark指令并且 replace:true 时
//会替换掉div中的内容(tag会被解析为div)
replace: true,
// templateUrl: 'header.html'
}
});
</script>
</body>
</html>