angularjs学习笔记之指令

前端之家收集整理的这篇文章主要介绍了angularjs学习笔记之指令前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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: '全部',}];
原文链接:https://www.f2er.com/angularjs/148790.html

猜你在找的Angularjs相关文章