要注意的是不要把自己开发的指令以ng开头，以免与内置指令冲突 

目录：ng-disabled，ng-readonly，ng-checked，ng-selected，ng-href，ng-src，ng-class，ng-style

ng-disabled

当它的值返回true时表示禁用当前元素，返回false时什么都不做

<body>

<!--在文本框输入内容时禁用按钮-->

<input type="text" ng-model="name"/>

<button ng-disabled="!name">disabled</button>

<!--3秒后input框变为可用状态-->

<div ng-controller="myController">

    <input type="text" ng-disabled="trueFalse"/>

</div>

<!-- ng-readonly --><!-- true只读，false正常使用 -->

<input type="text" ng-readonly="true"/>

<script>

    angular.module("myApp",[])

            .controller("myController",function($scope,$timeout){

                $scope.trueFalse = true;

                $timeout(function(){

                    $scope.trueFalse = false;

                },3000)

            })

</script>

</body>

ng-readonly

同ng-disabled一样的用法，这个指令是设置是否只读

ng-checked

同ng-disabled一样的用法，true选中，false不选中

ng-selected

同样是true选中，false不选中

ng-href

如果用a链接的href的话,给页面绑定的数据没有过来的时候点击文本会刷新本页面，如果用ng-href的话，数据没有过来的时候链接是不可以点击的

<body>

<!--延迟两秒给页面输送数据，如果用a链接的href的话数据没有过来的时候点击文本会刷新本页面，

如果用ng-href的话，数据没有过来的时候链接是不可以点击的-->

<div ng-controller="myController">

    <a ng-href="{{ myHref }}">myhref</a>

</div>

<script>

    angular.module("myApp",[])

            .controller("myController",function($scope,$timeout){

                $timeout(function(){

                    $scope.myHref = 'http://www.baidu.com';

                },2000)

            })

</script>

</body>

ng-src

同a链接的href是一个道理，ng-src在数据还没有过来的时候是不会加载图片的，src在数据没有加载过来的时候会报错

ng-class   ng-class-odd       ng-class-even

根据表达式条件返回的布尔值添加对应的class名。可以添加多个class，每个用逗号隔开ng-class-odd ng-class-even 表示奇数行和偶数行的样式

<!DOCTYPE html>

<html ng-app="myApp">

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script src="../../Angular/angular.min.js"></script>

    <style>

        .classRed{

            background:red;

        }

        .classGreen{

            background:green;

        }

    </style>

</head>

<body>

<div>

    <!-- 条件返回true 表示添加 条件返回false表示不添加。可以添加多个表达式来判断添加某个class样式-->

    <p ng-class="{classRed:1+1 == 3,classGreen:1+1 ==2}">ddd</p>

</div>

<div ng-controller="myController">

    <!-- 还可以指定奇数和偶数行的样式，注意引号的写法-->

    <ul>

        <li ng-repeat="v in arr" ng-class-even="'classRed'" ng-class-odd="'classGreen'">{{v}}</li>

    </ul>

</div>

<script>

    angular.module("myApp",[])

            .controller("myController",function($scope){

                $scope.arr = [1,2,3,4,5,6,7,8,9,0];

            });

</script>

</body>

</html>

ng-style

使用angular添加样式，以 key:value 的形式

<body>

<!--以键值对的形式给元素指定样式-->

<div ng-controller="myController">

    <p ng-style="objCss"></p>

</div>

<script>

    angular.module("myApp",[])

            .controller("myController",function($scope){

                $scope.objCss = {

                    width:'200px',

                    height:'200px',

                    background:'red'

                }

            })

</script>

</body>

Angular内置指令（一）的更多相关文章

  1. angular内置指令相关知识

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

  2. Angular内置指令

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

  3. Angular——内置指令

    内置指令 ng-app 指定应用根元素,至少有一个元素指定了此属性. ng-controller 指定控制器 ng-show控制元素是否显示,true显示.false不显示 ng-hide控制元素是否 ...

  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. UI第十九节——UICollectionView

    UICollectionView其实就是UITableView的升级版,在布局方面比UITableView更出色.下面,先看代码吧 #import "RootViewController.h ...

  2. VBA中使用计时器的两种方法

    '================================ ' VBA采用Application.OnTime实现计时器 ' ' http://www.cnhup.com '========= ...

  3. Maven生命周期小记

    1.Maven生命周期是为了所有的构建过程进行抽象和统一.Maven从大量的项目和构建工具中学习和反思,总结了一套高度完善.易扩展的生命周期.这个生命周期包含了项目的清理.初始化.编译.测试.打包.集 ...

  4. Home 安转beta版软件

    今天想装测试版的cocoapods,用 brew install cocoapods 后,总是安装稳定版,就是1.1.0,不是最新的beta版,发现用下面这个命令可以装最新beta版 brew ins ...

  5. angular 自定义指令 directive transclude 理解

    项目中断断续续的用了下angular,也没狠下心 认真的学习.angular 特别是自定义指令这块 空白. transclude 定义是否将当前元素的内容转移到模板中.看解释有点抽象. 看解释有点抽象 ...

  6. iOS 改变App状态栏颜色为白色

    默认状态栏为黑色,对于某些App不是很美观,变成白色很简单,只需要两个步骤. 1.在Info.plist中添加新项目,View controller-based status bar appearan ...

  7. Gnome_Terminal

    快捷键 ctrl shift m 我自定义的快捷键,可以给终端命名 ctrl shift t 新建标签页,并且目录为当前目录 ctrl shift pageup 标签页往前移 ctrl shift p ...

  8. tp框架获取常量信息、方法、命名空间

    获取系统常量信息: public function ShowInFo() { var_dump(get_defined_constants(true)); //如果参数为true,则分类显示 } 在这 ...

  9. Redis之清除所有缓存

    方法: /// <summary> /// 清除redis所有缓存 /// </summary> /// <param name="redisUrl" ...

  10. SecureCRT如何与Linux虚拟机进行关联

    首先在宿主机上确认虚拟网卡是否正确工作,并查看其IP地址,如本例中,宿主机的虚拟网卡VMnet8的IP地址为:192.168.121.1/24. VMnet8是VMware用于NAT连接的虚拟网卡. ...