内置指令

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. 20180725利用pmm监控管理mysql

    转自:https://www.percona.com/doc/percona-monitoring-and-management/architecture.html 报警机制https://www.p ...

  2. nyoj_518_取球游戏_201404161738

    取球游戏 时间限制:1000 ms  |  内存限制:65535 KB 难度:2   描述 今盒子里有n个小球,A.B两人轮流从盒中取球,每个人都可以看到另一个人取了多少个,也可以看到盒中还剩下多少个 ...

  3. CODEVS——T 2956 排队问题

    http://codevs.cn/problem/2956/  时间限制: 1 s  空间限制: 32000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Descri ...

  4. HUD——1286 找新朋友

    思路: 裸的欧拉函数 代码: #include<cstdio> #include<cstring> #include<cstdlib> #include<io ...

  5. 四则运算结对编程（GUI）

    四则运算GUI coding地址:https://git.dev.tencent.com/qyj814/GUI.git 结对伙伴:李梦宇 一.题目要求 定制出题要求.每次出题时用户都可以在界面上定制如 ...

  6. Spring MVC中@RequestMapping注解使用技巧（转）

    @RequestMapping是Spring Web应用程序中最常被用到的注解之一.这个注解会将HTTP请求映射到MVC和REST控制器的处理方法上. 在这篇文章中,你将会看到@RequestMapp ...

  7. 基本的文件I/O

    基本的文件 I/O 抽象基类 Stream 支持读取和写入字节. Stream 集成了异步支持. 其默认实现根据其相应的异步方法来定义同步读取和写入,反之亦然. 所有表示流的类都是从 Stream 类 ...

  8. Qt移动应用开发（二）：使用动画框架

    Qt移动应用开发(二):使用动画框架 上一篇博客介绍了怎样使用Qt的QML来对屏幕分辨率大小进行适应,其实,不同分辨率的适应是一个很棘手的问题,除了分辨率不同外,宽高比(aspect ratio)也不 ...

  9. 【bzoj3105】【cqoi2013】【新Nim游戏】【线性基+贪心】

    Description 传统的Nim游戏是这种:有一些火柴堆,每堆都有若干根火柴(不同堆的火柴数量能够不同).两个游戏者轮流操作,每次能够选一个火柴堆拿走若干根火柴.能够仅仅拿一根,也能够拿走整堆火柴 ...

  10. python编程（基于twisted的client编程）

    [ 声明:版权全部,欢迎转载.请勿用于商业用途. 联系信箱:feixiaoxing @163.com] python的twisted比較有意思,既能够做server方面的编程,也能够做client方面 ...