AngularJs -- 内置指令

2022-10-19 21:32:05

AngularJS提供了一系列内置指令。其中一些指令重载了原生的HTML元素，比如<form>和<a>标签，

当在HTML中使用标签时，并不一定能明确看出是否在使用指令。

其他内置指令通常以ng为前缀，很容易识别。例如后面将介绍的ng-href指令，它会提供一个超链接

，这个链接将处于禁用状态，直到ng-href="someExpresiion"中的表达式被调用并且返回一个值。

最后，某些内置指令并不会有对应的HTML标签，比如ng-controller，这个指令可以在标签的属性中使用，通常在包含很多子

元素并且需要共享作用域时使用

注意，所有以ng前缀开头作为命名空间的指令都是AngularJS提供的内置指令，因此不要把你自己开发的指令以这个前缀命名。

基础ng属性指令

首先来看看和原生HTML标签名称相似的一组内置指令，这组指令非常容易记忆，因为仅仅是在

原生标签前加上了ng前缀

ng-href;
ng-src;
ng-disabled;
ng-checked;
ng-readonly;
ng-selected;
ng-class;
ng-style;

布尔属性

根据THML标准的定义，布尔属性代表一个true或false值，当这个属性出现时，这个属性的值就是true （无论实际定义的值是什么）

如果未出现，这个属性的值就是false；

当在AngularJS中使用动态数据绑定时，不能简单地将这个属性值设置为true或false，因为根据标准定义只有当这个属相不出现时，

它的值才为false。因此AngularJS提供带有ng-前缀版本的布尔属性，通过运算表达式的值来决定在目标元素上是插入还是移除对应的属性。

ng-disabled

使用ng-disabled可以把disabled属性绑定到以下表单输入字段上：

<input> (text, checkbox, radio, number, url, email, submit);
<trextarea>;
<select>;
<button>;

当写普通的HTML输入字段时，如果在元素标签上出现了disabled属性就会禁用这个输入字段。通过ng-disabled可以对是否出现属性进行绑定。

例如，在下面例子中按钮会一直禁用，直到用户在文本字段中输入内容：

<input type="text" ng-model="someProperty" placeholder="TypetoEnable">

<button ng-model="button" ng-disabled="!someProperty">AButton</button>

在下面的例子，文本字段会被禁用五秒，直到在$timeout中将idDisabled属性设置为true:

<textarea ng-disabled="isDisabled">Wait5seconds</textarea>

angular.module('myApp', [])

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

    $rootScope.isDisabled = true;

    $timeout(function() {

        $rootScope.isDisabled = false;

    }, 5000);

});

ng-readoldy

同其它布尔属性一样，HTML定义只会检查readonly属性是否出现，而不是它的实际值。

通过ng-readonly可以将某个返回真或假的表达式是否出现readonly属性经行绑定：

Type here to make sibling readonly:

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

<input type="text"

    ng-readonly="someProperty"

    value="Some text here"/>

ng-checked

标准的checked属性是一个布尔属性，不需要进行赋值。通过ng-checked将某个表达式同是否出现checked属性进行绑定。

我们通过ng-init指令将someProperty的值设置为true。将some Property同ng-checked绑定在一起，AngularJS会输出标准的HTML checked属性，

这样默认会把复选框勾选：

<label>someProperty = {{someProperty}}</label>

<input type="checkbox"

       ng-checked="someProperty"

       ng-init="someProperty = true"

       ng-model="someProperty">

下面的这个这好相反

<label>someProperty = {{anotherProperty}}</label>

<input type="checkbox"

       ng-checked="anotherProperty"

       ng-init="anotherProperty = false"

       ng-model="anotherProperty">

ng-selected

ng-selected可以对是否出现option标签的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>

布尔值属性

ng-href, ng-src等属性虽然不是标准的HTML布尔属性，但是由于行为相似，所以在AngularJS源码内部是和布尔属性相等对待的。

ng-href 和 ng-src都能有效帮助重构和避免错误，因此在改进代码时强烈建议用它们代替原来的href和src属性。

ng-href

当使用当前作用域中的属性动态创建URL时，应该用ng-href代替href;

这里潜在的问题是当用户点击一个由插值动态生成链接时，如果插值尚未生效，将会跳转到错误的页面（通常是404）.

这时，如果使用ng-href，AngularJS会等到插值生效(在例子中是两秒以后)后在执行点击链接的行为：

<!-- 当 href 包含一个 {{expression}}时总是使用

 ng-href -->

<a ng-href="{{ myHref }}">I'm feeling lucky, when I load</a> 

<!-- 用户单击之前，href不会加载 -->

<a href="{{ myHref }}">I'm feeling 404</a>

将插值生效的事件延迟两秒，来观察实际的行为：

angular.module('myApp', [])

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

    $timeout(function() {

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

    }, 2000);

});

码农公寓