AngularJS内置指令之基础ng指令

AngularJS中的内置指令都是以ng开头的指令，因此我们在自定义指令时，不要以ng开头。

基础ng指令分为两类：

1、布尔类型

2、类布尔类型

1、布尔类型的指令包括：

ng-disabled、ng-readyonly、ng-checked、ng-selected这些指令通常后面接表达式为其赋值，若表达式的值非空表示true，空表示false。

来结合一个例子看一下，这几个的用法：

<input type="text" ng-model="someProperty" placeholder="TypetoEnable">
<button ng-disabled="someProperty">AButton</button>

第一行的代码是将text的值和someProperty进行绑定，第二行的代码是定义了一个按钮，ng-disabled的属性是说这个按钮是否需要被禁用。是否禁用有someProperty的值来决定。someProperty非空表示true，空表示false。

因此，本例的运行效果是：输入框中没有输入值时，按钮是禁用状态。当在输入框中输入值后，按钮变为非禁用状态。

这和disabled的属性的区别主要是，disabled属性是有你直接写true or false，相当于硬编码写死的东西。

而ng-disabled作用域中属性的值来决定，相对更加灵活。

ng-readonly和ng-checked、ng-selected类似。

2、类布尔类型包括

ng-href、ng-src

ng-href是超链接目标地址href属性的扩展，ng-src是src属性的扩展。

这两个内置指令通常后面也是接作用域中属性的值。它表示的是：只有当作用域中的属性生效时，href和src属性才起作用。

举例如下：

<a ng-href="{{ myUrl }}">I am lucky when i am loaded</a>
<a href="{{ myUrl }}">I am feeling 404 error</a>

app.run(function($rootScope,$timeout){
    $timeout(function(){
        $rootScope.myUrl = "http://www.baidu.com";
    },2000);

上面这段代码表示了两个超链接，一个是ng-href属性，另一个是href属性的超链接。他们的链接地址都是myUrl属性。

而下面的js代码表示，2秒钟后myUrl会被赋值生效。

我们都知道超链接的默认样式是蓝色的字体，并带有下划线。因此，这段代码会出现如下的效果：

ng-href声明的超链接，开始时时普通的文字，没有超链接的样式，两秒钟之后有了超链接的样式，单击可以链接到指定的网页。

href声明的超链接，一直具有超链接的样式，但是在开始的两秒钟点击不会发生跳转，两秒钟之后点击才能正常跳转。

ng-src用在图片中时<img ng-src="imgSrc">表示，只有当imgSrc生效时，才加载图片，如果src属性，则一开始就会加载图片。