AngularJS内置指令

来源：互联网发布：ipad专业视频剪辑软件编辑：程序博客网时间：2024/06/17 14:55

AngularJS内置指令笔记
原书：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属性。但是不知道为什么，两者的效果是一样的，学完后面的再回来看看。

0 0