1、创建和使用
var app = angular.module(‘myApp‘,[‘ng‘]);
app.directive(‘指令名称‘,func);
自定义指令的命名：
驼峰式，有两部分构成，前缀一般是公司或者项目的缩写，后缀表示的为指令的作用(tsHello)
使用指令时：采用烤串式的方式去使用
(ts-hello)
2、高级
属性：
①template 显示的模板内容
②restrict: ‘EACM‘ (E:元素A:属性C:类M：注释)
作为注释去调用自定义指令时，需要设置replace属性为true
③replace 替换
④scope：接收参数
<!DOCTYPE html>
<html ng-app="myModule">
<head lang="en">
<meta charset="UTF-8">
<script src="js/angular.js"></script>
<title></title>
</head>
<body>
<!--控制器的调用-->
<div ng-controller="myCtrl">
<!-- element-->
<ts-hello></ts-hello>
<!-- attribute-->
<div ts-hello></div>
<!-- class-->
<div class="ts-hello"></div>
<!-- directive: ts-hello -->
</div>
<script>
//模块的创建
var app = angular.module(‘myModule‘,[‘ng‘]);
//创建控制器
app.controller(‘myCtrl‘, function ($scope) {
})
//创建自定义指令
app.directive(‘tsHello‘, function () {
return {
template:‘<h1>Hello Directive</h1>‘,
// E:Element A:Atrribute C:Class M:Comment
restrict:‘EACM‘,
replace:true
}
})
</script>
</body>
</html>
3.调用指令来传递参数并处理：
①在自定义的指令内部去准备接收
指定scope，把要传递过来的值存在驼峰式命名的变量中，指定@，在调用指令传参时，就会读取该属性对应的值
scope:{
testName:‘@‘
}
②传递参数
在调用指令时，指定对应的属性名称和要传递的值
<div test-hello test-name="123"></div>
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<script src="js/angular.js"></script>
<title></title>
</head>
<body>
<div ng-controller="myCtrl">
<div ts-hello test-name="world"></div>
</div>
<script>
var app = angular.module(‘myApp‘, [‘ng‘]);
// 创建指令并传参
app.directive(‘tsHello‘, function () {
return {
template:‘<span> ‘ +
‘Hello {{testName}}</span>‘,
scope:{
testName:‘@‘
}
}
})
app.controller(‘myCtrl‘, function () {
console.log(‘myCtrl func is called‘);
})
</script>
</body>
</html>
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<script src="js/angular.js"></script>
<title></title>
</head>
<body>
<div ng-controller="myCtrl">
</div>
<!--调用指令，并通过属性传参-->
<ts-directive ts-name="Hello World"></ts-directive>
<script>
var app = angular.module(‘myApp‘, [‘ng‘]);
//创建指令
app.directive(‘tsDirective‘, function () {
return{
template:‘<h1>{{tsName}}</h1>‘,
scope:{
tsName:‘@‘//@取ts-name属性对应的值
}
}
})
app.controller(‘myCtrl‘, function () {
console.log(‘myCtrl func is called‘);
})
</script>
</body>
</html>
时间： 2024-10-27 00:44:28