JavaScript框架之AngularJS学习——指令（一）

最新推荐文章于 2024-06-03 09:20:03 发布

陈小名

最新推荐文章于 2024-06-03 09:20:03 发布

阅读量619

点赞数 1

分类专栏： AngularJS学习笔记文章标签： angularjs 框架 javascript directive 指令

本文链接：https://blog.csdn.net/chen_XiaoMing123/article/details/78210717

版权

AngularJS学习笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

AngularJS学习——指令（一）

指令是AngularJS应用最重要的组成部分之一，是对HTML属性或元素的扩展，通常情况下Web浏览器并不能识别这些属性或元素，但是AngularJS框架会把它们作为指令，然后执行相应的逻辑处理，最终将这些指令解析为Web浏览器能够识别的元素。

指令出现的形式：

1.作为HTML元素出现（E）

<my-directive></my-directive>

2.作为HTML元素属性出现（A）

<input type="text" my-directive>

3.作为CSS类样式出现（C）

<input type="text" class="my-directive"/>

4.作为HTML注释内容出现（M）

<!-- my-directive -->

一般情况下将指令作为HTML元素或属性使用（EA）

AngularJS通常分为内置指令和自定义指令。

内置指令之前的内容有讲解很多，大家可以回看之前的一些内容

AngularJS内置指令都是以ng开头。

1.内置指令

ng-app主要用于启动框架
ng-model表单元素和对应作用域中的属性建立数据绑定
ng-init初始化AngularJS作用域
ng-controller实例化控制对象
ng-disabled表单元素是否禁用
ng-checked表单元素是否选中
ng-change表单元素内容改变绑定方法
ng-class绑定样式
ng-bind与AngularJS表达式效果类似
ng-if是否出现在DOM中
ng-show是否在显示在页面中
ng-hide是否不显示在页面中
ng-repeat用于比阿尼作用域中的集合数据
ng-include用于将一个独立的HTML文件内容包含到指令出现的位置
ng-viewngRoute时使用的一个指令，将内容指定到指令出现的位置

2.AngularJS自定义指令

一般情况下，AngualrJS内置指令就能满足我们的需求，但是为了简化开发过程，我们可以将通用的功能封装成指令，形成自定义的指令库。

AngularJS模块对象提供了一个directive()方法来帮助我们实现自定义指令。

eg:

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
	<meta charset="UTF-8">
	<title>directive</title>
	<script src="https://cdn.bootcss.com/angular.js/1.6.5/angular.js"></script>	
</head>
<body ng-controller="myCtrl">
	<my-directive></my-directive>
	<script>
		var app = angular.module("myApp", []);
		app.directive("myDirective", function(){
			return {
				restrict: "ECMA",
				replace: true,
				template: "<h1>Hello World!</h1>"
			}
		})
	</script>
</body>
</html>

例子中，directive()方法接受两个参数：第一个参数为指令名称，采用驼峰式命名法；第二个为指令定义方法，需要返回一个对象（成为指令定义对象DDO），用于描述指令的特征及指令对应的处理逻辑。

注意，在使用自定义指令是，需要将指令名称改写为全部小写并在大小写出天价“-”或“：”将多个单词隔开，如：

<my-directive></my-directive>
<my:directive></my:directive>
<span my-directive></span>
<span my:directive></span>

为了符合HTML5命名规范，我们还可以如下：

<x-my-directive></x-my-directive>
<data-my-directive></data-my-directive>

当AngularJS框架匹配到自定义指令时，会自动将指令前缀“x-”或“data-”去除，并将指令名称中的“-”或者“：”分隔符去掉，转换成驼峰式命名。

在指令放回定义方法中：

restrict属性表示AngularJS指令使用的4中形式，ECMA；

replace属性，该属性用于指定是否使用template属性定义的HTML模板内容替换指令所在的HTML元素。如：

当replace为true时：

所有HTML元素被替换

当replace为false时

HTML元素没有被替换，指令模板内容嵌入指令中。

template属性，其中的内容可以是HTML内容，也可以在HTML内容中使用其他指令和AngularJS表达式，也可以使用templateUrl属性，填写相应的外部HTML模板路径，即可使用。

以上笔记整理自个人学习，用做个人学习分享。

陈小名

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript框架之AngularJS学习——指令（一）

AngularJS学习——指令指令是AngularJS应用最重要的组成部分之一，是对HTML属性或元素的扩展，通常情况下Web浏览器并不能识别这些属性或元素，但是AngularJS框架会把它们作为指令，然后执行相应的逻辑处理，最终将这些指令解析为Web浏览器能够识别的元素。指令出现的形式：1.作为HTML元素出现（E）2.作为HTML元素属性出现（A）
复制链接

扫一扫