angularjs学习笔记之指令

来源：互联网发布：最新网络兼职编辑：程序博客网时间：2024/04/30 03:03

AngularJS指令列表：http://www.runoob.com/angularjs/angularjs-reference.html

AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。AngularJS 使得开发现代的单页面应用程序（SPAs：Single Page Applications）变得更加容易。

AngularJS 属性以 ng- 开头

AngularJS 模块（Module）定义了 AngularJS 应用，angular.module可在全局位置创建、注册、获取Angular模块。所有模块（angular核心或第三方）都必须使用这个机制注册才能在应用中生效。

ng-app

ng-app 指令定义一个 AngularJS 应用程序，告诉 AngularJS应用当前这个元素是根元素。任何具有ng-app属性的DOM元素将被标记为$rootScope的起始点。$rootScope是作用域链的起始点,任何嵌套在ng-app内的指令都会继承它。

ng-app 可以带属性值，指定加载应用模块的名称，ng-app="模块名称"。

使用这个指令来自动启动（auto-bootstrap）一个 AngularJS 应用（在网页加载完毕时会自动载入），一般把它放在页面的根元素附近，例如<body>或<html>标签。当应用启动时，这个模块将会被载入到 $injector (注射器)。它应该包含了应用所需的代码，或者它依赖的其他模块包含了这些代码。

所有 AngularJS 应用都必须要有一个根元素，每一个 HTML 文档只能自动启动一个 AngularJS 应用。如果有多个 ng-app 指令，页面中第一个被找到的存放 ngApp 的标签会被定义为这个应用的根元素来自动启动这个应用。

<div ng-app="myApp"></div>var app = angular.module('myApp', []);

要在一个HTML文档中运行多个应用，必须使用angular.bootstrap来手工启动。而且 AngularJS 之间不能互相嵌套。

写法为：

angular.bootstrap(element, [modules], [config]);

element对应根ng-app的id，modules 为模块名数组。以下例子中，app1会自动加载，app2需要手动加载。

<body>    <div id="app1" ng-app="app1">{{5+5}}</div>    <div id="app2" ng-app="app2" ng-controller="WelcomeController">{{greeting}}</div>    <script type="text/javascript">        var app1 = angular.module("app1", []);        var app2 = angular.module("app2", [])        .controller('WelcomeController', function($scope) {            $scope.greeting = 'Welcome!';        });        angular.bootstrap(document.getElementById("app2"), [ 'app2' ]);    </script></body>

ng-controller

ng-controller 定义了控制器（Controller）用于控制 AngularJS 应用程序的数据，是一个javascript对象。在控制器中可以编写代码、制作函数和变量、并使用 scope 对象来访问。

ng-controller的作用是为嵌套在其中的指令创建一个子作用域，避免将所有操作和模型都定义在$rootScope上。

AngularJS 使用$scope 对象来调用控制器，$scope 是一个应用象(属于应用变量和函数)，控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。

<div ng-controller="myCtrl"></div>app.controller('myCtrl', function($scope) {});

ng-init

ng-init 指令初始化应用程序数据。ng-init 指令添加一些不必要的逻辑到 scope 中。

<div ng-init="greeting='Hello';person='World'">{{greeting}}{{person}}</div>

我一般会在init里调用一个方法，在页面加载之后就加载表格数据。

ng-bind

ng-bind 指令把应用程序数据绑定到 HTML 视图，使用给定的变量或表达式的值来替换 HTML 元素的内容。

<td ng-bind="item.company_name"></td>

{{}}表达式

AngularJS 表达式写在双大括号内：{{ expression }}，通过表达式可以把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。它会在内部$scope和视图之间创建绑定。基于这个绑定，只要$scope发生变化，视图就会随之自动更新。

AngularJS 将在表达式书写的位置"输出"数据，它们可以包含文字、运算符和变量。

实际上它是ng-bind的简略形式，用这种形式不需要创建新的元素，因此它常被用在行内文本中。

在屏幕可视的区域内使用{{}}会导致页面加载时未渲染的元素发生闪烁，用ng-bind可以避免这个问题。

<div>第{{ pn }}页，共{{ total_page }}页</div>

ng-cloak

除使用ng-bind来避免未渲染元素闪烁,还可以在含有{{ }}的元素上使用ng-cloak指令。ng-cloak指令会将内部元素隐藏,直到路由调用对应的页面时才显示出来。

ng-cloak 指令没有参数。

<p ng-cloak>{{ greeting }}</p>

ng-model

ng-model指令用来将input、select、text area或自定义表单控件同包含它们的作用域中的属性进行绑定。

它可以提供并处理表单验证功能。在元素上设置相关的CSS类(ng-valid、 ng-invalid等)，并负责在父表单中注册控件。

它将当前作用域中运算表达式的值同给定的元素进行绑定。如果属性并不存在它会隐式创建并将其添加到当前作用域中。

<input ng-model="suppliers.company_name" class="form-input" type="text" name="company_name"><select class="form-select" ng-model="selected" ng-options="status.status as status.val for status in suppliersStatus"></select>

{{}}，ng-bind，ng-model的差别：

{{}}html没有加载完毕{{val}}会直接显示到页面，直到angular渲染该绑定数据。这种行为有可能将{{val}}让用户看到，我们不断刷新时既可以看到；

ng-bind是在angular渲染完毕后将数据显示，是一种单向数据绑定的方式（$scope-->view）

ng-model将值绑定到表单元素上，用于绑定值会变化的表单元素等，是双向数据绑定（$scope-->view和view-->$scope）

双向数据绑定的原理

双向数据绑定意味着当 view 中有任何数据发生变化会自动地反馈到 scope 的数据上，当 scope 模型发生变化时，view 中的数据也会更新到最新的值。很显然，这需要一个监控。
事实上，AngularJS 确实在幕后为 scope 模型上设置了一个监听队列，用来监听数据变化并更新 view 。每次绑定一个东西到 view 上时 AngularJS 就会往 $watch 队列里插入一条 $watch，用来检测它监视的 model 里是否有变化的东西。
当浏览器接收到可以被 angular context 处理的事件时，$digest 循环就会触发。$digest 会遍历所有的 $watch 。

ng-click

ng-click用来指定一个元素被点击时调用的方法或表达式。

<button type="button" ng-click="payfor(0)">批量付款</button>

ng-repeat

ng-repeat用来遍历一个集合或为集合中的每个元素生成一个模板实例。

 $index:遍历的进度(0...length-1)。

 $first:当元素是遍历的第一个时值为true。

 $middle:当元素处于第一个和最后元素之间时值为true。

 $last:当元素是遍历的最后一个时值为true。

 $even:当$index值是偶数时值为true。

 $odd:当$index值是奇数时值为true。

<li ng-repeat="person in people" ng-class="{even: !$even, odd: !$odd}">    {{person.name}} lives in {{person.city}}</li>

在例子中，偶数行class值为even，奇数行class值为odd（JavaScript中数组的索引从0开始，因此用!$even和!$odd来将$even和$odd的布尔值反转。）

ng-show/ng-hide

ng-show和ng-hide根据所给表达式的值来显示或隐藏HTML元素。

当赋值给ng-show指令值为false时元素会被隐藏，当赋值给ng-hide指令的值为true时元素也会被隐藏。
元素的显示或隐藏是通过移除或添加ng-hide这个CSS类来实现的。.ng-hide类被预先定义在了AngularJS的CSS文件中，并且它的display属性的值为none（用了!important标记）。

<td class="table-layer" ng-show="table_layer_{{$index}}"></td>

var tabName = "table_layer_" + index;$scope[tabName] = !$scope[tabName];$scope.layer = !$scope.layer;

ng-if

ng-if 指令用于在表达式为 false 时移除 HTML 元素。如果 if 语句执行的结果为 true，会添加移除元素，并显示。

ng-if 指令不同于 ng-hide， ng-hide 隐藏元素，而 ng-if 是从 DOM 中移除元素。

当一个元素被ng-if从DOM中移除，同它关联的作用域也会被销毁。当它重新加入DOM中时会通过原型继承从它父作用域生成一个新的作用域。

ng-if重新创建元素时用的是它们编译后的状态，当元素被移除后重新添加进来，它的状态会使它原始的状态，而不是被移除时候的状态。

<span ng-if="item.status==1">待付款</span><span ng-if="item.status==2">付款中</span><span ng-if="item.status==3">付款成功</span><span ng-if="item.status==4">付款失败</span><span ng-if="item.status==5">已驳回</span>

ng-href

ng-href 指令覆盖了原生的 <a> 元素 href 属性。当使用当前作用域中的属性动态创建URL时，则需要使用 ng-href 而不是 href。

当用户点击一个动态生成的链接时，如果链接创建未生效会跳转到错误的页面。ng-href 指令确保了链接是正常的，AngularJS 会在插值生效后执行点击行为。

<a ng-href="{{loginHref}}">登录</a>

ng-options

ng-options 指令用于通过数组使用 <options> 填充 <select> 元素的选项。

<select ng-model="selected" ng-options="status.status as status.val for status in abilityStatus"></select>

$scope.abilityStatus = [{        status: 0,        val: '待添加',    }, {        status: 1,        val: '已添加',    }, {        status: 99,        val: '全部',    }];

2 0