内置指令

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——内置指令的更多相关文章

  1. angular内置指令相关知识

    原文地址 https://www.jianshu.com/p/5a5b43a8e91f 大纲 1.angular指令的分类 2.angular指令之——组件 3.angular指令之——属性指令 (n ...

  2. Angular内置指令(一)

    要注意的是不要把自己开发的指令以ng开头,以免与内置指令冲突  目录:ng-disabled,ng-readonly,ng-checked,ng-selected,ng-href,ng-src,ng- ...

  3. Angular内置指令

    记录一下工作中使用到的一些AngularJS内置指令 内置指令:所有的内置指令的前缀都为ng,不建议自定义指令使用该前缀,以免冲突 1. ng-model 使用ng-model实现双向绑定,通过表单的 ...

  4. Angular内置指令(二)

    目录: $rootScope,ng-app,.run(),ng-include,ng-repeat,ng-if,ng-switch,ng-init ng-show/ng-hide,ng-model,n ...

  5. [转] Angular 4.0 内置指令全攻略

    [From] https://segmentfault.com/a/1190000010416792 简书链接 在这篇文章中,我们将分别列举每一个内置指令的用法,并提供一个例子作为演示.尽量用最少最简 ...

  6. Angular中的内置指令和自定义指令

    NG中的指令,到底是什么(what)? 为什么会有(why)?以及怎样使用(how)? What: 在NG中,指令扩展HTML功能,为 DOM 元素调用方法.定义行为绑定数据等. Why: 最大程度减 ...

  7. AngularJS内置指令

    指令,我将其理解为AngularJS操作HTML element的一种途径. 由于学习AngularJS的第一步就是写内置指令ng-app以指出该节点是应用的根节点,所以指令早已不陌生. 这篇日志简单 ...

  8. angularJS内置指令一览

    基础ng指令 ng-href ng-src ng-disabled ng-readonly ng-checked ng-selected ng-class ng-style ng-show ng-hi ...

  9. AngularJS高级程序设计读书笔记 -- 指令篇 之 内置指令

    1. 内置指令(10-12 章) AngularJS 内置超过 50 个内置指令, 包括 数据绑定,表单验证,模板生成,时间处理 和 HTML 操作. 指令暴露了 AngularJS 的核心功能, 如 ...

随机推荐

  1. Java高级应用之泛型与反射

    /*************************************************************************************************** ...

  2. 工资(money)

    (money/money.in/money.out) 时限1000ms 内存256MB 聪哥在暑假参加了打零工的活动,这个活动分为n个工作日,每个工作日的工资为Vi.有m个结算工钱的时间,聪哥可以自由 ...

  3. HBase单节点的安装与配置

    HBase的安装配置1.下载:http://mirror.bit.edu.cn/apache/hbase/stable/   hbase-1.2.6-bin是直接编译好的,直接安装.   hbase- ...

  4. LeetCode234_PalindromeLinkedList (推断是否为回文链表) Java题解

    题目: Given a singly linked list, determine if it is a palindrome. Follow up: Could you do it in O(n) ...

  5. openCV—Python(2)—— 载入、显示和保存图像

    一.函数简单介绍 1.imread-读取图像 函数原型:imread(filename, flags=None) filename:读取的图像路径名:比如:"H:\img\lena.jpg& ...

  6. “2014年ArcGIS影像高级培训班——5月份北京站”火热报名中!

    您从事遥感类的相关工作吗?您正对着一景景影像数据不知从何下手吗?您有TB级甚至更高量级的影像数据须要有效管理.即时分享吗?您须要构建Web端的应用实现影像实时处理.在线分析吗? 您是否已经找到有效的解 ...

  7. 利用rman自己主动备份转储spfile

    利用rman自己主动备份转储spfile [情景简单介绍] 生产环境丢失了server的參数文件,rman已开启自己主动备份设置. [操作过程简述] ----启动rman $rman target / ...

  8. javascript的call和apply

    coffeescript里,每个文件编译成JS后,都是(function(){...}).call(this);的架势 这个call,该怎么理解呢? 在javascript里面,call 或者 app ...

  9. python 文档生成 字符串替换

    替换 fnr, fnr_source, fnw = 'my.py.html', '产品清单.txt', 'my.py.res.html'd_source = {}with open(fnr_sourc ...

  10. highcharts注意事项

    var json = [ {"id":"1","tagName":"apple"}, {"id":& ...