Angular——内置指令
内置指令
ng-app 指定应用根元素,至少有一个元素指定了此属性。
ng-controller 指定控制器
ng-show控制元素是否显示,true显示、false不显示
ng-hide控制元素是否隐藏,true隐藏、false不隐藏
ng-if控制元素是否“存在”,true存在、false不存在
ng-src增强图片路径
ng-href增强地址
ng-class控制类名
ng-include引入模板
ng-disabled表单禁用
ng-readonly表单只读
ng-checked单/复选框表单选中
ng-selected下拉框表单选中
基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.red {
color: red;
} .blue {
color: blue;
} .yellow {
color: yellow;
}
</style>
</head>
<body ng-app="App">
<div ng-controller="DemoController">
<h1 ng-show="false">ng-show</h1>
<h1 ng-hide="true">ng-hide</h1>
<h1 ng-if="false">ng-if</h1>
<img ng-src="{{path}}">
<span ng-class="{red:true,blue:true}">ng-class</span>
</div>
<script src="../libs/angular.min.js"></script>
<script>
var App = angular.module('App', []);
App.controller('DemoController', ['$scope', function ($scope) {
$scope.path = './images/2203.png';
}]);
//ng-if可以将元素直接移除,ng-show与ng-hide页面虽然看不到,但是检查依然可以看见
//ng-src scr的值若是一个绑定的值,浏览器渲染的时候会发送请求,因为没解析到脚本,所以不认识这里会有一个小bug,直到
//解析到了脚本以后才会去替换这个img标签里src的值
//ng-href同上
</script>
</body>
</html>
Angular——内置指令的更多相关文章
- angular内置指令相关知识
原文地址 https://www.jianshu.com/p/5a5b43a8e91f 大纲 1.angular指令的分类 2.angular指令之——组件 3.angular指令之——属性指令 (n ...
- Angular内置指令(一)
要注意的是不要把自己开发的指令以ng开头,以免与内置指令冲突 目录:ng-disabled,ng-readonly,ng-checked,ng-selected,ng-href,ng-src,ng- ...
- Angular内置指令
记录一下工作中使用到的一些AngularJS内置指令 内置指令:所有的内置指令的前缀都为ng,不建议自定义指令使用该前缀,以免冲突 1. ng-model 使用ng-model实现双向绑定,通过表单的 ...
- Angular内置指令(二)
目录: $rootScope,ng-app,.run(),ng-include,ng-repeat,ng-if,ng-switch,ng-init ng-show/ng-hide,ng-model,n ...
- [转] Angular 4.0 内置指令全攻略
[From] https://segmentfault.com/a/1190000010416792 简书链接 在这篇文章中,我们将分别列举每一个内置指令的用法,并提供一个例子作为演示.尽量用最少最简 ...
- Angular中的内置指令和自定义指令
NG中的指令,到底是什么(what)? 为什么会有(why)?以及怎样使用(how)? What: 在NG中,指令扩展HTML功能,为 DOM 元素调用方法.定义行为绑定数据等. Why: 最大程度减 ...
- AngularJS内置指令
指令,我将其理解为AngularJS操作HTML element的一种途径. 由于学习AngularJS的第一步就是写内置指令ng-app以指出该节点是应用的根节点,所以指令早已不陌生. 这篇日志简单 ...
- angularJS内置指令一览
基础ng指令 ng-href ng-src ng-disabled ng-readonly ng-checked ng-selected ng-class ng-style ng-show ng-hi ...
- AngularJS高级程序设计读书笔记 -- 指令篇 之 内置指令
1. 内置指令(10-12 章) AngularJS 内置超过 50 个内置指令, 包括 数据绑定,表单验证,模板生成,时间处理 和 HTML 操作. 指令暴露了 AngularJS 的核心功能, 如 ...
随机推荐
- Java高级应用之泛型与反射
/*************************************************************************************************** ...
- 工资(money)
(money/money.in/money.out) 时限1000ms 内存256MB 聪哥在暑假参加了打零工的活动,这个活动分为n个工作日,每个工作日的工资为Vi.有m个结算工钱的时间,聪哥可以自由 ...
- HBase单节点的安装与配置
HBase的安装配置1.下载:http://mirror.bit.edu.cn/apache/hbase/stable/ hbase-1.2.6-bin是直接编译好的,直接安装. hbase- ...
- LeetCode234_PalindromeLinkedList (推断是否为回文链表) Java题解
题目: Given a singly linked list, determine if it is a palindrome. Follow up: Could you do it in O(n) ...
- openCV—Python(2)—— 载入、显示和保存图像
一.函数简单介绍 1.imread-读取图像 函数原型:imread(filename, flags=None) filename:读取的图像路径名:比如:"H:\img\lena.jpg& ...
- “2014年ArcGIS影像高级培训班——5月份北京站”火热报名中!
您从事遥感类的相关工作吗?您正对着一景景影像数据不知从何下手吗?您有TB级甚至更高量级的影像数据须要有效管理.即时分享吗?您须要构建Web端的应用实现影像实时处理.在线分析吗? 您是否已经找到有效的解 ...
- 利用rman自己主动备份转储spfile
利用rman自己主动备份转储spfile [情景简单介绍] 生产环境丢失了server的參数文件,rman已开启自己主动备份设置. [操作过程简述] ----启动rman $rman target / ...
- javascript的call和apply
coffeescript里,每个文件编译成JS后,都是(function(){...}).call(this);的架势 这个call,该怎么理解呢? 在javascript里面,call 或者 app ...
- python 文档生成 字符串替换
替换 fnr, fnr_source, fnw = 'my.py.html', '产品清单.txt', 'my.py.res.html'd_source = {}with open(fnr_sourc ...
- highcharts注意事项
var json = [ {"id":"1","tagName":"apple"}, {"id":& ...