angular学习(二)-- Directive
1.2 指令:Directive
AngularJS 通过被称为 指令 的新属性来扩展 HTML,
具体表现形式一般为带有前缀 ng-xxx 的 HTML 属性。
指令的使用形式
- ng-xxx 的属性本身并不是标准中定义的属性
- 很多情况下无法通过语法校验
- HTML5 允许扩展的属性,以
data-开头 - 在 ng 中可以使用
data-ng-作为前缀来让网页对 HTML5 有效 - 二者效果相同
内置指令
AngularJS 内置了很多指令,用来增强 HTML,以下是一些常用内置指令的介绍。
ngApp
ngController
ngInit
ngBind
- ng-bind
- ng-non-bindable
ngBindHtml
ngRepeat
- ng-repeat
解决重复项报错问题
ngClass
- ng-class
- ng-class-even
- ng-class-odd
ng-cloak
ng-hide-show-if-switch
ng-src
其它常用指令
- ng-checked : 单选/复选是否选中,只是单向绑定数据
- ng-disabled : 是否禁用
- ng-readonly : 是否只读
- ng-selected : 是否选中,只是单向数据绑定
事件型指令
- ng-click :鼠标单击
- ng-blur :失去焦点
- ng-focus :得到焦点
- ng-change :发生改变
- ng-copy :拷贝完成
- ng-dblclick :鼠标双击
- ng-submit:表单提交
- ng-copy
- ng-cut
- ng-paste
- ng-keydown
- ng-keyup
- ng-mousedown
- ng-mouseenter
- ng-mouseleave
- ng-mouseover
- ng-mouseup
angular学习(二)-- Directive的更多相关文章
- angular学习(二):Controller定义总结
上文中总结完了ng-view的应用,将运维后台分开界面到2个,进行到 逻辑Controller处理中,本文将总结一下在项目中Controller都用到了哪些知识: $scope:作用域对象,仅仅是代表 ...
- angular学习笔记(二)-创建angular模块
如果在页面的html标签(或任意标签)中添加ng-app,表示对整个页面应用angular来管理. 他是一个模块. 模块有助于把东西从全局命名空间中隔离. 今天学习如何自定义创建模块: <!DO ...
- angular学习的一些小笔记(中)之directive
directive里面的几个配置,上代码就清晰了 <!DOCTYPE html> <html ng-app='app'> <head> <meta chars ...
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
- 学习AngularJs:Directive指令用法(完整版)
这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...
- Angular之指令Directive系列
项目筹备近期开启Angular学习,指令比较难理解所以记录备案,推荐Angualr实战学习视频大漠穷秋 Angular实战 一.指令directive概述 指令可以对元素绑定事件监听或者改变DOM结构 ...
- angular学习笔记(三十)-指令(2)-restrice,replace,template
本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...
- angular学习笔记(三十一)-$location(1)
本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...
- angular学习笔记(三十)-指令(10)-require和controller
本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...
- angular学习笔记(三十)-指令(7)-compile和link(2)
继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...
随机推荐
- IE的hack问题浅谈
*我一直以为是IE7的专属选择. 开始,我以为是bug ,怎么可能会有+号.一定是哪位同事写错了.找了度娘才知道自己的不足.原来也是可以的. 后来,通过ie8和ie7来调整自己的css.也感觉不用ha ...
- EJB系列 - EJB高级概念
本人博客文章网址:https://www.peretang.com/ejb-advanced-concepts/ EJB内幕 幕后的EJB:容器会为每一个bean实例自动生成称为EJB对象的代理, 由 ...
- 极致精简的webservice例子
看了网上好多关于webservice的例子,基本上对初学者来说都是模棱两可云里雾里,现在,我将网上关于webservice的讲解提炼出来,通过一个最简单使用并且方便的例子,告诉大家什么是webserv ...
- 从源码的角度看Activity是如何启动的
欢迎访问我的个人博客,原文链接:http://wensibo.top/2017/07/03/Binder/ ,未经允许不得转载! 大家好,今天想与大家一起分享的是Activity.我们平时接触的最多的 ...
- iOS 微信消息拦截插件系列教程-(总目录)
微信iOS消息拦截插件教程 标签: 越狱开发 背景介绍 本教程所有内容免费 本教程来源于一次知识分享,如果有需要了解更多的 请联系QQ:480071411 iOS逆向高级开发群:375024882 1 ...
- 浅入深出之Java集合框架(上)
Java中的集合框架(上) 由于Java中的集合框架的内容比较多,在这里分为三个部分介绍Java的集合框架,内容是从浅到深,如果已经有java基础的小伙伴可以直接跳到<浅入深出之Java集合框架 ...
- 第三章:3.3 post 请求
1. 在 from表单中将 属性 methtod="post‘ 改变成post 2. 访问主页地址:http://localhost:8000/index 3. 以上出现的错误. 查资料发现 ...
- 交叉编译 tesseract
官方参考资料说明: tesseract 依赖库: (https://github.com/tesseract-ocr/tesseract/wiki/Compiling#linux) leptoni ...
- 第四章:Django 模型 —— 设计系统表
1. Django框架提供了完善的模型(Model )层来创建和存储数据,每一个模型对应数据库中的唯一的一张表. 2. Django 模型基础知识: .每一本模型是一个Python类,继承了djang ...
- hdu_2222: Keywords Search(AC自动机模板题)
题目链接 统计一段字符串中有多少个模板串在里面出现过 #include<bits/stdc++.h> using namespace std; ; struct Trie { ]; int ...