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 相关文章推荐
JS 创建对象(常见的几种方法)
Nov 03 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 06 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
Mar 28 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
Sep 09 Javascript
JavaScript中数组继承的简单示例
Jul 29 Javascript
对于jQuery性能的一些优化建议
Aug 13 Javascript
pace.js页面加载进度条插件
Sep 29 Javascript
javascript学习小结之prototype
Dec 03 Javascript
在AngularJS中使用jQuery的zTree插件的方法
Apr 21 Javascript
setTimeout学习小结
Feb 08 Javascript
angularjs结合html5实现拖拽功能
Jun 25 Javascript
微信小程序学习笔记之本地数据缓存功能详解
Mar 29 Javascript
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
php下通过POST还是GET来传值
2008/06/05 PHP
PHP判断文件是否存在、是否可读、目录是否存在的代码
2012/10/03 PHP
深入解析PHP中逗号与点号的区别
2013/08/05 PHP
页面乱码问题的根源及其分析
2013/08/09 PHP
详解WordPress中简码格式标签编写的基本方法
2015/12/22 PHP
AJAX PHP无刷新form表单提交的简单实现(推荐)
2016/09/09 PHP
laravel 解决Validator使用中出现的问题
2019/10/25 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
javascript数字数组去重复项的实现代码
2010/12/30 Javascript
ASP中Sub和Function的区别说明
2020/08/30 Javascript
基于JavaScript实现网页倒计时自动跳转代码
2015/12/28 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
2016/01/05 Javascript
在JavaScript中call()与apply()区别
2016/01/22 Javascript
js实现简单排列组合的方法
2016/01/27 Javascript
基于Javascript实现倒计时功能
2016/02/22 Javascript
JavaScript弹窗基础篇
2016/04/27 Javascript
微信小程序 前端源码逻辑和工作流详解
2016/10/08 Javascript
基于jQuery实现左侧菜单栏可折叠功能
2016/12/27 Javascript
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
解决pycharm py文件运行后停止按钮变成了灰色的问题
2018/11/29 Python
python进行TCP端口扫描的实现
2018/12/21 Python
python 提取tuple类型值中json格式的key值方法
2018/12/31 Python
Python切片操作去除字符串首尾的空格
2019/04/22 Python
python 求1-100之间的奇数或者偶数之和的实例
2019/06/11 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
Python读取分割压缩TXT文本文件实例
2020/02/14 Python
mac在matplotlib中显示中文的操作方法
2020/03/06 Python
通过Python实现一个简单的html页面
2020/05/16 Python
德国化妆品和天然化妆品网上商店:kosmetikfuchs.de
2017/06/09 全球购物
Athleta官网:购买女士瑜伽服、技术运动服和休闲运动服
2020/11/12 全球购物
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
经典优秀毕业生求职信范文分享
2013/12/18 职场文书
保护母亲河倡议书
2014/04/14 职场文书
跳槽求职信范文
2014/05/26 职场文书
教师自查自纠材料
2014/10/14 职场文书
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB