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

最新推荐文章于 2024-11-08 13:46:46 发布
最新推荐文章于 2024-11-08 13:46:46 发布
阅读量713 收藏 1
点赞数 1
分类专栏： AngularJS学习笔记 文章标签： angularjs 框架 javascript directive 指令
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chen_XiaoMing123/article/details/78210717
版权

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模板路径，即可使用。





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

陈小名
关注
专栏目录
AngularJs bootstrap搭载前台框架——准备工作
10-21
AngularJS是一个由Google维护的JavaScript MVC框架，它提供了强大的数据绑定和依赖注入功能，使得前端开发更加高效。而Bootstrap则是Twitter开源的一套前端UI框架，它包含了一系列预先设计的组件和样式，能够快速...
AngularJs bootstrap搭载前台框架——基础页面
10-21
AngularJS是一种开源的JavaScript框架，由Google支持，主要用于构建Web应用的前端。它通过声明式的方式绑定应用程序的逻辑和视图，简化了复杂的代码。AngularJS通过数据绑定和依赖注入机制，使得开发者能够更加高效...
angularjs指令作用及用法
ioniconline的博客
12-03 1927
您可自由转发此文， 但请保留出处：Ionic在线学习网站  http://www.ioniconline.com   1.ng-app 作用：定义了 AngularJS 应用程序的 根元素。 例1：构建的是一整套的angular应用，那么应该将ng-app作为标签的一部分 像： .......
ANGULAR自带指令有哪些？
weixin_33881050的博客
12-08 628
1.背景介绍 AngularJS 通过被称为 指令 的新属性来扩展 HTML。 AngularJS 通过内置的指令来为应用添加功能。 AngularJS 允许你自定义指令。 2.知识剖析 angular指令分为：内置指令 && 自定义指令。 内置指令：AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。 自...
AngularJS内置指令之基础ng指令
小新正在敲代码
09-17 2011
AngularJS中的内置指令都是以ng开头的指令，因此我们在自定义指令时，不要以ng开头。 基础ng指令分为两类： 1、布尔类型 2、类布尔类型 1、布尔类型的指令包括： ng-disabled、ng-readyonly、ng-checked、ng-selected这些指令通常后面接表达式为其赋值，若表达式的值非空表示true，空表示false。 来结合一个例子看一下，这几个的用法：
AngularJs之内置指令篇
扶苏小锦鲤
04-26 345
为了方便开发人员对于常见功能的处理，AngularJs提供了内置的指令来实现功能，也可以自定义指令，内置的指令都是ng-开头的，常见的有控制指令如np-app等、渲染指令如ng-repeat等、节点指令如ng-class等等、事件处理指令如ng-click等等。指令：就是扩展了HTML的基本功能，通过额外的标签、属性来增强HTML功能，Angular的指令在页面中体现出来就是一个标签\属性\cla
JavaScript框架之AngularJS学习——指令（二）
陈小名的博客
10-16 411
AngularJS学习——指令（二） AngularJS学习——指令（一） 在指令（一）中我们学习过，自定义指令方法第二个参数为指令定义方法，该方法返回一个对象，即指令定义对象（Directive Definition Object, DOO）。指令（二）介绍一下指令定义对象其他属性和方法。 1.link方法 自定义指令中的template属性用于指定AngularJS指令
JavaScript框架之AngularJS学习——应用模块化
陈小名的博客
09-25 454
AngualrJS学习——应用模块化 在软件设计过程中，为了能够对系统开发流程进行管理、保证系统的稳定性以及后期的可维护性，可以按照一定的准则对软件进行模块的划分。 根据模块来进行系统开发，可提高系统的开发进度、明确系统的需求、保证系统的稳定性。 AngularJS中的模块 通常把处理业务逻辑的代码写在单独的JS文件中，然后在HTML页面中引入该文件。 调用angular
JavaScript框架之AngularJS学习——准备
陈小名的博客
09-22 421
AngularJS——准备 AngularJS AngularJS是Google工程师开发的一款开源JavaScript框架 官网：https://angularjs.org/ 学习时候常用查阅文档：https://docs.angularjs.org/api AngularJS以HTML作为模板语言并扩展HTML元素及属性，使得应用组件开发保持高度清晰、一致。 学习准
JavaScript框架之AngularJS学习——表单校验
陈小名的博客
10-09 472
AngularJS学习——表单校验 Web前端数据校验的意义在于改善用户体验，用户不用等到将数据提交到服务器就知道哪些数据是不合法的，这样也能够减轻应用服务器的压力。 AngularJS表单校验模式 为说明AngularJS在作用域中会维护一个状态属性，举例说明 eg: 模板 在Chrome浏览器中打开该页面控制台，查看input相关
JavaScript框架之AngularJS学习——双向数据绑定
陈小名的博客
09-23 632
AngaularJS学习——双向数据绑定 数据绑定是AngularJS框架最优秀的特性之一，能够帮助Web前端开发人员在很大程度上减少对DOM的操作。 数据绑定是AngularJS框架在视图（DOM元素）与作用域之间佳妮的数据同步机制。所谓“双向”，是指界面的操作能够实时同步到作用域中，作用域中的数据修改也能够实现回显到界面中。 作用域可以被视为一个容器，里面有一些基于key-val
AngularJS学习笔记——与用户交互的动态清单列表
07-15
AngularJS是一种强大的JavaScript框架，它提供了丰富的功能，使开发者能够轻松构建动态Web应用。在这个实例中，我们将关注以下几个核心概念： 1. **双向数据绑定**：AngularJS的核心特性之一就是双向数据绑定，它...
JavaScript框架之AnuglarJS学习——MVC
陈小名的博客
09-24 860
AngularJS学习——MVC MVC是一种软件架构模式，独立于任何一门语言（只是一种软件思想，不是具体的某一种语言或技术。），于1970年起源于Smalltalk语言，随后随着桌面应用的普及广泛用于桌面应用开发中，发展到今天可谓无处不在。 MVC是Model(模型)、View(视图)、Controller(控制器)的首字母缩写。MVC核心思想是把数据的管理、业务逻辑控制和数据的展示
JavaScript框架之AngularJS学习——作用域与事件（上）
陈小名的博客
09-27 617
AngularJS学习——作用域与事件 JavaScript对象是基于key-value键值对的，我们可以把JavaScript对象作为一个map数据结构使用，而AngularJS作用域本质上就是一个普通的JavaScript对象。 AngularJS作用域对象和普通JavaScript对象一样，都可以在作用域对象中增加属性或者方法，不同的是我们不需要手动去构造作用域对象，当HTML页面中出现
JavaScript框架之AngularJS学习——UIRouter
陈小名的博客
10-11 538
UIRouter的大致使用方式 $urlRouterProvider $stateProvider
JavaScript框架之AngularJS学习——作用域与事件（中）
陈小名的博客
10-03 504
AngularJS学习——作用域与事件 上集链接 4.$apply与$digest应用 上集中讲到，当AngularJS作用域中的模型数据发生变化时，AngularJS会自动触发$digest循环，从而达到自动更新视图的目的。 有些情况则需要我们手动调用$apply()方法来触发$digest循环。 $aaply与$digest应用实战
JavaScript框架之AngularJS学习——作用域与事件（下）
陈小名的博客
10-03 396
AngularJS学习——作用域与事件 上集链接 中集链接 AngualrJS作用域支持两种时间传播方法 事件从子作用域路由到父作用域中。事件从父作用域广播到所有子作用域中。 相关方法有$on()、$emit()、$broadcast() 下面注意接收每种方法的使用 1.$emit方法实现时间路由 AngularJS作用域对象
Echarts 折线图
最新发布
weixin_44443380的博客
11-08 203
解决方法：设置emphasis.lineStyle和折线图本身lineStyle相同即可。问题：鼠标悬停在折线图上，折线变粗。3、去掉 hover 折线变粗方法。
AngularJS动态表格生成指令——ng-dynamic-table解析
1. **AngularJS 应用开发：** ng-dynamic-table 是为 AngularJS 框架定制的指令。因此，理解 AngularJS 的基本概念如数据绑定、指令、控制器、服务等是使用此模块的前提。 2. **自定义指令的创建与使用：** ng-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值