AngularJS 自定义指令

最新推荐文章于 2023-06-29 07:00:00 发布

原创最新推荐文章于 2023-06-29 07:00:00 发布 · 295 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs #web

本文介绍了如何在AngularJS中创建自定义指令，并通过实例展示了自定义指令的使用方法及其实现细节。自定义指令可以扩展HTML的功能，使得开发者能够更高效地构建复杂的应用程序。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS 自定义指令</title>
</head>



<body ng-app="App">

<tag></tag>

<div tag></div>

<div class="tag"></div>




<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>