AngularJS内置指令
2015-11-19 00:56
896 查看
AngularJS内置指令笔记
原书:ng-book官网
2015-11-19
转专业入坑,新手一枚
最近实验室项目要用到AngularJS,在这里做点笔记吧,遇到的坑都写出来,给同样新手的童鞋们看看,推荐一下慕课网大漠穷秋老师的AngularJS实战教程。
首先,如果运行Angular代码看不到应该看到的效果,看看下面:
AngularJS版本对不对
有没有引入angular.js脚本
有没有ng-app声明angular的地盘
废话不多说,这里记录一下angularJS内置指令的学习心得
第一部分 布尔属性
1.ng-disabled
上代码
效果自己试一下,有些坑自己还是要踩踩
刚说完自己遇到个坑:
小坑:单个页面中出现两个ng-app会怎样呢?
梯子:angularJS默认只会加载第一个ng-app,也即只有第一个模块中的各种定义才能被使用。那如何单个页面加载多个ng-app模块呢?这里要借助angular.bootstrap来完成其他模块的手动加载。详情自查。
在HTML中,disabled,readonly,checked,selected这些属性只要出现(即只要被写入了代码中),不管是disabled=true还是disabled=false,即不管给与什么赋值或者不赋值,浏览器都会让他们起该起的作用 ,例如:
上述代码中前三个按钮都是被禁用的,只有第四个按钮是可以点的。
基于这一点,angular内置了带有ng前缀的对应布尔属性来控制对应的布尔属性是否出现。例如:如果ng-disabled=”true”,则disabled属性出现,否则disabled属性不出现。这些ng前缀属性也都是布尔属性,可以直接给予赋值true或false;也可以给它们赋值一个变量,这个时候如果该变量非空则相当于赋值true,如果变量为空则相当于赋值false。
根据这点,如果Demo1中第一个输入框为空,someProperty为空值, 于是按钮和第二个文本输入框ng-disabled=true,disabled属性出现,此时为禁用操作。
Demo2则是延时输入,通过js代码实现,如下(代码只是测试用,不考虑是否污染全局空间等因素):
通过timeout函数控制isDisabled布尔属性,5秒后置假,按钮解禁。
2.ng-readonly
效果和ng-disabled类似。
上代码:
同样,如果thirdProperty非空则ng-readonly=true,readonly属性出现,此时下面的输入栏会变成只读。
反映到上述代码中,一旦第一个文本框有输入,第二个文本框就会变成只读,无法写入。
3.ng-checked
上代码:
forthProperty一旦非空,复选框就会自动打勾。Have a try!
4.ng-selected
上代码:
复选框打勾->绑定值isTwoFish非空->ng-selected=true->selected属性出现->多选条切换到Two Fish。
怎么样?ng系列布尔属性是不是很神奇?
第二部分 类布尔属性
为什么叫做类布尔属性呢,因为这一小节讲到的两个属性的处理方式和第一小节中angular对布尔属性的处理方式有些类似。
1.ng-href
上代码:
基本的思想是,myHref为空时,第一个链接变成纯文本,没有下划线,不能点击;而第二个链接与myHref有没有值无关,都以链接的形式存在。原文的意思是若myHref为空,点击第二个链接会404,自己测试了下,并没有404,但是没有任何反应。
这里可以这样理解:myHref空->ng-href=false->href属性被移除,相当于:
2.ng-src
上代码:
这里没发现有什么区别。ng-src的原理应该和ng-href一样,ng-src=false是移除src属性。但是不知道为什么,两者的效果是一样的,学完后面的再回来看看。
原书:ng-book官网
2015-11-19
转专业入坑,新手一枚
最近实验室项目要用到AngularJS,在这里做点笔记吧,遇到的坑都写出来,给同样新手的童鞋们看看,推荐一下慕课网大漠穷秋老师的AngularJS实战教程。
首先,如果运行Angular代码看不到应该看到的效果,看看下面:
AngularJS版本对不对
有没有引入angular.js脚本
有没有ng-app声明angular的地盘
废话不多说,这里记录一下angularJS内置指令的学习心得
第一部分 布尔属性
1.ng-disabled
上代码
<html ng-app="myApp"> <head> <script type="text/javascript" src="angular-1.4.7/angular.js"></script> <script type="text/javascript" src="modules.js"></script> <title></title> </head> <body> <h1>Demo1</h1> <input type="text" ng-model="someProperty" placeholder="TypetoEnable"> <button ng-model="button" ng-disabled="!someProperty">AButton</button> <input type="text" ng-disabled="!someProperty" placeholder="TypeFirstOnetoEnable"> <h1>Demo2</h1> <button ng-disabled="isDisabled">Wait5seconds</button> </body> </html>
效果自己试一下,有些坑自己还是要踩踩
刚说完自己遇到个坑:
小坑:单个页面中出现两个ng-app会怎样呢?
梯子:angularJS默认只会加载第一个ng-app,也即只有第一个模块中的各种定义才能被使用。那如何单个页面加载多个ng-app模块呢?这里要借助angular.bootstrap来完成其他模块的手动加载。详情自查。
在HTML中,disabled,readonly,checked,selected这些属性只要出现(即只要被写入了代码中),不管是disabled=true还是disabled=false,即不管给与什么赋值或者不赋值,浏览器都会让他们起该起的作用 ,例如:
<button type="button" disabled="true">Click Me!</button> <button type="button" disabled="false">Click Me!</button> <button type="button" disabled>Click Me!</button> <button type="button">Click Me!</button>
上述代码中前三个按钮都是被禁用的,只有第四个按钮是可以点的。
基于这一点,angular内置了带有ng前缀的对应布尔属性来控制对应的布尔属性是否出现。例如:如果ng-disabled=”true”,则disabled属性出现,否则disabled属性不出现。这些ng前缀属性也都是布尔属性,可以直接给予赋值true或false;也可以给它们赋值一个变量,这个时候如果该变量非空则相当于赋值true,如果变量为空则相当于赋值false。
根据这点,如果Demo1中第一个输入框为空,someProperty为空值, 于是按钮和第二个文本输入框ng-disabled=true,disabled属性出现,此时为禁用操作。
Demo2则是延时输入,通过js代码实现,如下(代码只是测试用,不考虑是否污染全局空间等因素):
angular.module('myApp', []) .run(function($rootScope, $timeout) { $rootScope.isDisabled = true; $timeout(function() { $rootScope.isDisabled = false; }, 5000); });
通过timeout函数控制isDisabled布尔属性,5秒后置假,按钮解禁。
2.ng-readonly
效果和ng-disabled类似。
上代码:
Type here to make sibling readonly: <input type="text" ng-model="thirdProperty"><br/> <input type="text" ng-readonly="thirdProperty" value="Some text here"/>
同样,如果thirdProperty非空则ng-readonly=true,readonly属性出现,此时下面的输入栏会变成只读。
反映到上述代码中,一旦第一个文本框有输入,第二个文本框就会变成只读,无法写入。
3.ng-checked
上代码:
<label>someProperty = {{forthProperty}}</label> <input type="text" ng-model="forthProperty"><br/> <input type="checkbox" ng-checked="forthProperty">
forthProperty一旦非空,复选框就会自动打勾。Have a try!
4.ng-selected
上代码:
<label>Select Two Fish:</label> <input type="checkbox" ng-model="isTwoFish"><br/> <select> <option>One Fish</option> <option ng-selected="isTwoFish">Two Fish</option> </select>
复选框打勾->绑定值isTwoFish非空->ng-selected=true->selected属性出现->多选条切换到Two Fish。
怎么样?ng系列布尔属性是不是很神奇?
第二部分 类布尔属性
为什么叫做类布尔属性呢,因为这一小节讲到的两个属性的处理方式和第一小节中angular对布尔属性的处理方式有些类似。
1.ng-href
上代码:
<!--html部分--> <button type="button" ng-click="trigger()">Enable the first link</button> <a ng-href="{{ myHref }}">I'm feeling lucky, when I load</a> <a href="{{ myHref }}">I'm feeling 404</a>
angular.module('myApp', []) .run(function($rootScope, $timeout) { $rootScope.myHref; $rootScope.trigger=function(){ $rootScope.myHref="http://www.baidu.com"; } });
基本的思想是,myHref为空时,第一个链接变成纯文本,没有下划线,不能点击;而第二个链接与myHref有没有值无关,都以链接的形式存在。原文的意思是若myHref为空,点击第二个链接会404,自己测试了下,并没有404,但是没有任何反应。
这里可以这样理解:myHref空->ng-href=false->href属性被移除,相当于:
<a>I'm feeling 404</a> <!--一段纯文本-->
2.ng-src
上代码:
<!DOCTYPE html> <html ng-app="myApp"> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript" src="1.3.0.14/angular.js"></script> <script type="text/javascript" src="InnerDirectiveDemo.js"></script> </head> <body> <h1>WrongWay</h1> <img src="{{imgSrc}}"/> <h1>Rightway</h1> <img ng-src="{{imgSrc}}"/> </body> </html>
angular.module('myApp', []) .run(function($rootScope, $timeout) { $timeout(function() { $rootScope.imgSrc = 'http://img4.imgtn.bdimg.com/it/u=3243284774,335733140&fm=21&gp=0.jpg'; }, 5000); });
这里没发现有什么区别。ng-src的原理应该和ng-href一样,ng-src=false是移除src属性。但是不知道为什么,两者的效果是一样的,学完后面的再回来看看。
相关文章推荐
- AngularJS基础教程之简单介绍
- angular.element方法汇总
- angularJS 中$attrs方法使用指南
- 简述AngularJS相关的一些编程思想
- Angular用来控制元素的展示与否的原生指令介绍
- AngularJS的一些基本样式初窥
- 创建你的第一个AngularJS应用的方法
- 详解AngularJS中的作用域
- 简介AngularJS的视图功能应用
- AngularJS语法详解
- angularJS与bootstrap结合实现动态加载弹出提示内容
- angularjs中的e2e测试实例
- 简介AngularJS中使用factory和service的方法
- 使用angular写一个hello world
- vue,angular,avalon这三种MVVM框架优缺点
- 使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
- AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
- 举例讲解AngularJS中的模块
- 使用AngularJS处理单选框和复选框的简单方法
- AngularJS+Node.js实现在线聊天室