您的位置：首页 > Web前端 > AngularJS

AngularJS指令

2015-11-25 18:44 543 查看
Angular指令简介：

AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。

ng-app

ng-app 指令初始化一个 AngularJS 应用程序：

ng-app 指令定义了 AngularJS 应用程序的 根元素。

ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。

ng-init

ng-init 指令初始化应用程序数据。

ng-init 指令为 AngularJS 应用程序定义了 初始值。

通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。

ng-model

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

ng-model 指令 绑定 HTML 元素 到应用程序数据。

ng-model 指令也可以：

为应用程序数据提供类型验证（number、email、required）。

为应用程序数据提供状态（invalid、dirty、touched、error）。

为 HTML 元素提供 CSS 类。

绑定 HTML 元素到 HTML 表单。

ng-repeat

ng-repeat 指令会重复一个 HTML 元素：

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">

<p>使用 ng-repeat 来循环数组</p>

<ul>

<li ng-repeat="x in names">
{{ x }}

</li>

</ul>

<div>

输出：

Jani

Hege

Kai

还可以出路对象数组：

<div ng-app="" ng-init="names=[

{name:'Jani',country:'Norway'},

{name:'Hege',country:'Sweden'},

{name:'Kai',country:'Denmark'}]">

<p>循环对象：</p>
<ul>

<li ng-repeat="x in names">

{{ x.name + ', ' + x.country }}
</li>

</ul>

</div>

输出与上面是一个效果，可以把上面的数组对象想成是查询出来的数据。

下面是一个标签页的实例，包含了常用的一些指令：

<!doctype html>
<html ng-app="app">
<head>
<meta charset="utf-8"/>
<style>
ul {
list-style : none;
clear      : both;
}
ul > li {
list-style  : none;
float       : left;
margin-left : 15px;
display     : block;
}
.active {
background : #1f292e;
color      : #FFFFFF;
}
a {
color : #000066;
}
.active > a {
color : #FFFFFF;
}
[ng\\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\\:form{display:block;}.ng-animate-start{border-spacing:1px 1px;-ms-zoom:1.0001;}.ng-animate-active{border-spacing:0px 0px;-ms-zoom:1;}
</style>
</head>
<body ng-cloak>
<div ng-controller="testCtrl">
<ul>
<li ng-class="{'active':currentMenu == 'menu1'}"><a href="javascript:;" ng-click="selectMenu('menu1')">菜单1</a>
</li>
<li ng-class="{'active':currentMenu == 'menu2'}"><a href="javascript:;" ng-click="selectMenu('menu2')">菜单2</a>
</li>
</ul>
<br><br>

<div ng-if="currentMenu == 'menu1'">
我是菜单1里面的内容
</div>
<div ng-if="currentMenu == 'menu2'">
我是菜单2里面的内容
</div>

</div>
<script src="http://ngnice.com/lib/angular/1.2.16/angular.js"></script>
<script>
angular.module("app", []);
angular.module("app").controller("testCtrl", ["$scope", function ($scope) {
$scope.currentMenu = "menu1";
$scope.selectMenu = function (menu) {
$scope.currentMenu = menu;
}
}]);
</script>
</body>
</html>


上述例子给ng-app指定了一个名称叫”app“，同时js代码使用
angular.module("app", []);
定 义了一个名称为”app“的module，同时用这个app module 的controller方法定义了一个testCtrl；定义module函数是angular对象上的静态方法，第一个参数传名称，第二个参数是一个数 组，这个数组表示这个module所引用的其他module，在这个例子中我们没有使用任何其他的module，所以传入一个空的数组，如果第二个参数不 传，表示获取名称为”app“的module；
关于显示哪个内容区域我使用了
ng-if="currentMenu == 'menu1'"
和
ng-if="currentMenu == 'menu2'"
,顾名思义，ng-if意思是如果表达式为真编译并且显示ng-if内部的模板元素，如果为假，不显示任何内容；

至于选中菜单的样式，我使用了
ng-class="{'active':currentMenu == 'menu1'}"
,意思就是currentMenu 为menu1时添加class ”active“，否则没有任何样式。

上面的3个例子，很好的展示了如何开启一个ng的web，并且如何模块化的使用ng，如果你都看懂了,说明你已经掌握了如何使用ng-controller、数据的双向绑定，写模板，并且初步接触了很多内置的指令（如：
ng-app
,
ng-controller
,
ng-model
,
ng-if
,
ng-class
,
ng-click
）。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航