AngularJS内置指令


Posted in Javascript onFebruary 04, 2015

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

这篇日志简单记录了一些内置指令,先使用起来,再谈一些有趣的东西。

内置指令

所有的内置指令的前缀都为ng,不建议自定义指令使用该前缀,以免冲突。
首先从一些常见的内置指令开始。
先列出一些关键的内置指令,顺便简单说说作用域的问题。

ng-model

将表单控件和当前作用域的属性进行绑定,这么解释似乎也不太正确。
但先不要管咬文嚼字,用起来倒是易懂,例如:

<input type="text" ng-model="someModel.someProperty" /><br>

{{someModel.someProperty}}

ng-init

该指令被调用时会初始化内部作用域。
这个指令一般会出现在比较小的应用中,比如给个demo什么的...

<div ng-init="job='fighter'">

    I'm a/an {{job}}

</div>

除了ng-init,我们还有更多更好的选择。

ng-app

每一次用AngularJS都离不开这个指令,顺便说下$rootScope。
声明了ng-app的元素会成为$rootScope的起点,而$rootScope是作用域链的根,通常声明在<html>你懂的。
也就是说根下的作用域都可以访问它。
但是,不建议过度使用$rootScope,免得全局变量满天飞,效率又差又难管。
下面是一个例子:

<html ng-app="myApp">

<body>

    {{ someProperty }}

</body>

<script>

var myApp = angular.module('myApp', [])

.run(function($rootScope) {

    $rootScope.someProperty = 'hello computer';

}); 

</script>

</html>

ng-controller

我们用这个指令在一个DOM元素上装上controller。
一个控制器? 确实,从字面意思上这样理解倒是不错,那我们为什么需要控制器?
记得AngularJS 1.2.x时还可以这样定义controller来着...

function ohMyController($scope) {

    //...

}

AngularJS 1.3.x中禁止了这种方式,因为这种方式会让controller满天飞,分不清层次,所有东西都挂在$rootScope上...
ng-controller必须有一个表达式作为参数,另外通过$scope来继承上级$scope的方法和属性什么的,$rootScope也包括在内。
下面只是一个简单的例子,ancestor无法访问child的作用域。

<div ng-controller="AncestorController">

    {{ ancestorName }}

    {{ childName }}

    <div ng-controller="ChildController">

        {{ ancestorName }}

        {{ childName }}

    </div>

</div>

<script>

var myApp = angular.module('myApp', [])

.controller('ChildController', function($scope) {

    $scope.childName = 'child';

})

.controller('AncestorController', function($scope) {

    $scope.ancestorName = 'ancestor';

});

</script>

作用域的问题远不止如此,暂且搁下,继续看看其他内置指令。

ng-form

起初不明白为什么会有个表单指令,<form>标签感觉也够用啊。
以表单验证为例,在上一篇中有这么一段代码:

<input type="submit" ng-disabled="mainForm.$invalid" />

也就是表单的状态为$invalid时禁用提交按钮。
如果场景再稍微复杂一点点,比如一个父表单中有多个子表单,子表单中有3个验证通过时父表单便可以提交。
但是,<form>是不可以嵌套的。
考虑到这种场景,我们便使用ng-form指令来解决这一问题。
例如:

<form name="mainForm" novalidate>

    <div ng-form="form1">

        姓名:<input type="text" ng-required="true" ng-model="name"/><br>

        证件号码:<input type="number" ng-minLength="15" ng-maxLength="18" ng-required="true" ng-model="idnum"/>

    </div>

    <br>

    <div ng-form="form2">

        监护人姓名:<input type="text" ng-required="true" ng-model="gname"/><br>

        监护人证件号码:<input type="number" ng-minLength="15" ng-maxLength="18" ng-required="true" ng-model="gidnum"/>

    </div>

    <button ng-disabled="form1.$invalid && form2.$invalid">submit all</button>

</form>

ng-disabled

像这种只要出现则生效的属性,我们可以在AngularJS中通过表达式返回值true/false令其生效。
禁用表单输入字段。

<textarea ng-disabled="1+1==2">1+1=?</textarea>

ng-readonly

通过表达式返回值true/false将表单输入字段设为只读。
弄个例子,3秒后变成只读.

<input type="text" ng-readonly="stopTheWorld" value="stop the world after 3s"/>

.run(function($rootScope,$timeout){

    $rootScope.stopTheWorld=false;

    $timeout(function(){

        $rootScope.stopTheWorld = true;

    },3000)

})

ng-checked

这个是给<input type="checkbox" />用的,比如...

<input type="checkbox" ng-checked="someProperty" ng-init="someProperty = true" ng-model="someProperty">

ng-selected

给<select>里面的<option>用的,例子:

<label>

    <input type="checkbox" ng-model="isFullStack">

    I'm Full Stack Engineer

</label>

<select>

    <option>Front-End</option>

    <option>Back-End</option>

    <option ng-selected="isFullStack">Full Stack !!!</option>

</select>

 

ng-show/ng-hide

根据表达式显示/隐藏HTML元素,注意是隐藏,不是从DOM移除,例如:

<div ng-show="1+1 == 2">

    1+1=2

</div>

<div ng-hide="1+1 == 3">

    you can't see me.

</div>

ng-change

不是HTML那套onXXX之类的,而是ng-XXX。
结合ng-model使用,以ng-change为例:

<input type="text" ng-model="calc.arg"  ng-change="calc.result = calc.arg*2" />

    <code>{{ calc.result }}</code>

或者比如ng-options

{{}}

其实这个也是一个指令,也许觉得和ng-bind差不多,但页面渲染略慢时可能会被看到。
另外,{{}}的performance远不如ng-bind,只是用起来很方便。

ng-bind

ng-bind的行为和{{}}差不多,只是我们可以用这个指令来避免FOUC(Flash Of Unrendered Content),也就是未渲染导致的闪烁。

ng-cloak

ng-cloak也可以为我们解决FOUC。 ng-cloak会将内部元素隐藏,直到路由调用对应的页面。

ng-if

如果ng-if中的表达式为false,则对应的元素整个会从DOM中移除而非隐藏,但审查元素时你可以看到表达式变成注释了。
如果相进行隐藏,可以使用ng-hide。

<div ng-if="1+1===3">

    无法审查到该元素

</div>

<div ng-hide="1+1==2">

    可审查

</div>

ng-switch

单独使用没什么意思,下面是例子:

<div ng-switch on="1+1">

    <p ng-switch-default>0</p>

    <p ng-switch-when="1">1</p>

    <p ng-switch-when="2">2</p>

    <p ng-switch-when="3">3</p>

</div>

ng-repeat

不明白为毛不叫iterate,总之是遍历集合,给每个元素生成模板实例,每个实例的作用域中可以用一些特殊属性,如下:

$index

$first

$last

$middle

even

odd

不用特地解释,这些都很容易看出来是干什么的,下面是一个例子:

<ul>

    <li ng-repeat="char in 

    [{'alphabet': 'K'},

    {'alphabet': 'A'},

    {'alphabet': 'V'},

    {'alphabet': 'L'},

    {'alphabet': 'E'},

    {'alphabet': 'Z'}] " ng-show="$even">{{char.alphabet}}</li>

</ul>

ng-href

起初我在一个文本域中弄了个ng-model,然后像这样<a href="{{myUrl}}">在href里面写了进去。
其实这样href和ng-href看不出什么区别,所以我们可以试试这样:

<ul ng-init="myHref=''">

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

    <li><a href="{{ myHref }}">可以点击,但不一定是正确的地址</a></li>

</ul>

.run(function($rootScope, $timeout) {

    $rootScope.linkText = '尚未加载,您无法点击';

    $timeout(function() {

        $rootScope.linkText = '请点击'

        $rootScope.myHref = 'http://google.com';

    }, 2000);

})

ng-src

大同小异,即表达式生效前不要加载该资源。
例子(ps: 图片不错! ):

<img ng-src="{{imgSrc}}"/>

.run(function($rootScope, $timeout) {

    $timeout(function() {

        $rootScope.imgSrc = 'https://octodex.github.com/images/daftpunktocat-guy.gif';

    }, 2000);

})

ng-class

用作用域中的对象动态改变类样式,例如:

<style>

    .red {background-color: red;}

    .blue {background-color: blue;}

</style>

<div ng-controller="CurTimeController">

    <button ng-click="getCurrentSecond()" >Get Time!</button>

    <p ng-class="{red: x%2==0,blue: x%2!=0}" >Number is: {{ x }}</p>

</div>

.controller('CurTimeController', function($scope) {

    $scope.getCurrentSecond = function() {

        $scope.x = new Date().getSeconds();

    };

}) 

以上就是本文所述的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
javascript 用函数实现继承详解
May 28 Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 Javascript
浅谈jquery的html方法里包含特殊字符的处理
Nov 30 Javascript
jQuery倒计时代码(超简单)
Feb 27 Javascript
easyui combogrid实现本地模糊搜索过滤多列
May 13 Javascript
AngularJS 异步解决实现方法
Jun 12 Javascript
javascript的this关键字详解
May 20 Javascript
微信小程序swiper禁止用户手动滑动代码实例
Aug 23 Javascript
详解Nuxt.js 实战集锦
Nov 19 Javascript
浅谈Vue组件单元测试究竟测试什么
Feb 05 Javascript
js制作提示框插件
Dec 24 Javascript
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
javascript内置对象操作详解
Feb 04 #Javascript
js判断文本框剩余可输入字数的方法
Feb 04 #Javascript
javascript 兼容各个浏览器的事件
Feb 04 #Javascript
浅谈js中变量初始化
Feb 03 #Javascript
jquery实现submit提交表单
Feb 03 #Javascript
jQuery实现跨域
Feb 03 #Javascript
JavaScript错误处理
Feb 03 #Javascript
You might like
一个查看session内容的函数
2006/10/09 PHP
一个不易被发现的PHP后门代码解析
2014/07/05 PHP
跟我学Laravel之快速入门
2014/10/15 PHP
thinkphp循环结构用法实例
2014/11/24 PHP
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
Js如何判断客户端是PC还是手持设备简单分析
2012/11/22 Javascript
JS读取XML文件示例代码
2013/11/15 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
2015/11/25 Javascript
使用Ajax与服务器(JSON)通信实例
2016/11/04 Javascript
angular+bootstrap的双向数据绑定实例
2017/03/03 Javascript
Vue自定义事件(详解)
2017/08/19 Javascript
详解vue组件开发脚手架
2018/06/15 Javascript
js实现简单选项卡功能
2020/03/23 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
vue中使用vue-cli接入融云实现即时通信
2019/04/19 Javascript
Javascript数组方法reduce的妙用之处分享
2019/06/10 Javascript
layui清空,重置表单数据的实例
2019/09/12 Javascript
在Python中进行自动化单元测试的教程
2015/04/15 Python
Python读取网页内容的方法
2015/07/30 Python
用不到50行的Python代码构建最小的区块链
2017/11/16 Python
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
Django中Model的使用方法教程
2018/03/07 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
对Pytorch神经网络初始化kaiming分布详解
2019/08/18 Python
解决windows下python3使用multiprocessing.Pool出现的问题
2020/04/08 Python
Python 分布式缓存之Reids数据类型操作详解
2020/06/24 Python
python中温度单位转换的实例方法
2020/12/27 Python
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
英国时尚女装购物网站:Missguided
2018/08/23 全球购物
金融专业个人的自我评价
2013/10/18 职场文书
关于圣诞节的广播稿
2014/01/26 职场文书
小学“向国旗敬礼”网上签名寄语活动总结
2014/09/27 职场文书
Python - 10行代码集2000张美女图
2021/05/23 Python
关于windows server 2012 DC 环境 重启后蓝屏代码:0xc00002e2的问题
2022/05/25 Servers