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属性,则一开始就会加载图片。