AngularJS内置指令

原创 2015年11月19日 00:56:36

AngularJS内置指令笔记
原书:ng-book官网

2015-11-19


转专业入坑,新手一枚
最近实验室项目要用到AngularJS,在这里做点笔记吧,遇到的坑都写出来,给同样新手的童鞋们看看,推荐一下慕课网大漠穷秋老师的AngularJS实战教程。
首先,如果运行Angular代码看不到应该看到的效果,看看下面:

  1. AngularJS版本对不对
  2. 有没有引入angular.js脚本
  3. 有没有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常见内置指令 自定义指令

AngularJS 指令
  • gyq04551
  • gyq04551
  • 2017年02月15日 20:59
  • 330

AngularJs 常见内置指令

AngularJS 指令 --> .red { color: red; } .blue { color: blue; }
  • u011301203
  • u011301203
  • 2016年11月19日 01:22
  • 801

AngularJS内置指令示例——表单验证

示例1: var appModule = angular.module('TestFormModule', [])...
  • bboyjoe
  • bboyjoe
  • 2016年03月01日 16:28
  • 1555

AngularJS内置指令

一、常见的指令: ng-app 作用:定义了 AngularJS 应用程序的 根元素。 用法: ng-controller 作用:用于AngularJS应用添加控制器。 用法: ng-i...
  • qq_15980201
  • qq_15980201
  • 2017年12月30日 10:40
  • 29

AngularJS内置指令

指令,我将其理解为AngularJS操作HTML element的一种途径。 由于学习AngularJS的第一步就是写内置指令ng-app以指出该节点是应用的根节点,所以指令早已不陌生。 这篇...
  • zsy799689372
  • zsy799689372
  • 2016年09月23日 17:09
  • 129

AngularJS内置指令

由于学习AngularJS的第一步就是写内置指令ng-app以指出该节点是应用的根节点,所以指令早已不陌生。 这篇日志简单记录了一些内置指令,先使用起来,再谈一些有趣的东西。 内置指令 所有的内置指令...
  • u011613356
  • u011613356
  • 2015年11月20日 21:12
  • 211

AngularJs之内置指令篇

为了方便开发人员对于常见功能的处理,AngularJs提供了内置的指令来实现功能,也可以自定义指令,内置的指令都是ng-开头的,常见的有控制指令如np-app等、渲染指令如ng-repeat等、节点指...
  • mm825474872
  • mm825474872
  • 2017年04月26日 21:22
  • 124

AngularJs内置指令大全

1、ng-model 这个大家都非常熟悉了,就是将表单控件和当前作用域的属性进行绑定。需要注意绑定的scope的范围(父scope与子scope)。 ng-model主要绑定的元素包括input,...
  • fenxinzi557
  • fenxinzi557
  • 2018年01月10日 11:41
  • 67

angularjs内置指令

AngularJS快速入门指南20:快速参考 AngularJS指令   本指南中使用过的AngularJS指令:指令 描述 说明 ng-app 定义一个application的根元素。 ...
  • xdongll
  • xdongll
  • 2016年09月21日 17:24
  • 357

AngularJs内置指令

ng-app 每一次用AngularJS都离不开这个指令,顺便说下$rootScope。声明了ng-app的元素会成为$rootScope的起点,而$rootScope是作用域链的根, 通...
  • mini_jike
  • mini_jike
  • 2016年05月26日 12:38
  • 1129
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AngularJS内置指令
举报原因:
原因补充:

(最多只允许输入30个字)