Angularjs系列之常用内置指令

原创 2017年08月21日 10:27:48

2.4.1.    常用内置指令

常用内置指令有一些独特的性质。虽然可用表达式生成HTML代码从而与它们等效,但这些做法都是不推荐的。

ng-href

当使用当前作用域中的属性动态创建URL时,应该用ng-href代替hrefAngular.js表达式可以设定大部分HTML元素的属性或者值,但单独设定锚链接的href属性是不可以的。这里的潜在问题是当用户点击一个由插值动态生成的链接时,如果插值尚未生效,将会跳转到错误的页面(通常是404)。

ng-src

ng-href同理,AngularJS会告诉浏览器在 ng-src 对应的表达式生效之前不要加载图像,因为生效之前加载的图片是无效的。

ng-disabled

使用 ng-disabled 可以把 disabled 属性绑定到各表单输入字段上。当写普通的HTML输入字段时,如果在元素标签上出现了 disabled 属性就会禁用这个输入字段。

ng-checked

标准的 checked 属性是一个布尔属性,不需要进行赋值。通过 ng-checked 将某个表达式同是否出现checked属性进行绑定。要与ng-model联合使用才有效果。

ng-readonly

同其他布尔属性一样,HTML定义只会检查 readonly 属性是否出现,而不是它的实际值。通过 ng-readonly 可以将某个返回真或假的表达式同是否出现 readonly 属性进行绑定:

ng-selected

可以对是否出现 option 标签的 selected 属性进行绑定。

ng-include

加载、编译并包含外部HTML片段到当前的应用中。模板的URL被限制在与应用文档相同的域和协议下,可以通过白名单或包装成被信任的值来突破限制。更进一步,需要考虑跨域资源共享(Cross-Origin Resource SharingCORS)和同源规则(Same Origin Policy)来确保模板可以在任何浏览器中正常加载。例如,所有浏览器都不能进行跨域的请求,部分浏览器也不能访问file://协议的资源

ng-switch

 ng-switch-when  on="propertyName" 一起使用,可以在 propertyName 发生变化时渲染不同指令到视图中。

ng-if

根据表达式的值在DOM中生成或移除一个元素。同 no-show  ng-hide 指令最本质的区别是,它不是通过CSS显示或隐藏DOM节点,而是真正生成或移除节点。

ng-repeat

遍历一个集合或为集合中的每个元素生成一个模板实例。集合中的每个元素都会被赋予自己的模板和作用域。同时每个模板实例的作用域中都会暴露一些特殊的属性。$index :遍历的进度(0... length-1 )。$first:当元素是遍历的第一个时值为 true$middle:当元素处于第一个和最后元素之间时值为 true$last:当元素是遍历的最后一个时值为true$even:当 $index 值是偶数时值为 true $odd :当 $index 值是奇数时值为true

ng-init

在指令被调用时设置内部作用域的初始状态。

ng-bind

尽管可以在视图中使用 {{ }} 模板语法(AngularJS内置的方式),我们也可以通过 ng-bind指令实现同样的行为。内容会被当作子文本节点渲染到含有 ng-bind 指令的元素内。

ng-cloak

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

ng-bind-template

 ng-bind 指令类似, ng-bind-template 用来在视图中绑定多个表达式。

ng-model

 inputselecttext area 或自定义表单控件同包含它们的作用域中的属性进行绑定。它可以提供并处理表单验证功能,在元素上设置相关的CSS类(ng-validng-invalid等),并负责在父表单中注册控件。

ng-show/ng-hide

根据所给表达式的值来显示或隐藏HTML元素。当赋值给 ng-show 指令的值为 false 时元素会被隐藏。类似地,当赋值给 ng-hide 指令的值为 true 时元素也会被隐藏。

ng-change

在表单输入发生变化时计算给定表达式的值。因为要处理表单输入,这个指令要和 ngModel 联合起来使用。

ng-form

在一个表单内部嵌套另一个表单。普通的HTML  <form> 标签不允许嵌套,但ng-form 可以。内部所有的子表单都合法时,外部的表单才会合法。CSS类会根据表单的验证状态自动设置:表单合法时设置 ng-valid;表单不合法时设置 ng-invlid;表单未进行修改时设置 ng-pristion;表单进行过修改时设置 ng-dirty

Angular不会将表单提交到服务器,除非它指定了action属性。要指定提交表单时调用哪个JavaScript方法,使用下面两个指令中的一个。ng-submit:在表单元素上使用。ng-click:在第一个按钮或submit类型(input[type=submit])的输入字段上使用。

ng-click

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

ng-select/ng-options

将数据同HTML <select> 元素进行绑定。这个指令可以和 ng-model 以及ng-options 指令一同使用,ng-options 的值可以是一个内涵表达式(comprehension expression),它可以接受一个数组或对象,并对它们进行循环,将内部的内容提供给select 标签内部的选项。数组作为数据源:用数组中的值做标签;用数组中的值作为选中的标签;用数组中的值做标签组;用数组中的值作为选中的标签组。对象作为数据源:用对象的键值(key-value)做标签;用对象的键值作为选中的标签;用对象的键值作为标签组;用对象的键值作为选中的标签组。

ng-class

style内不能使用angularjs表达式。使用 ng-class 动态设置元素的类,方法是绑定一个代表所有需要添加的类的表达式。重复的类不会添加。当表达式发生变化,先前添加的类会被移除,新类会被添加。ng-class-evenng-class-oddAngularJS内置支持奇偶行不同外观的样式,内置CSS样式名是.even.odd。代码范式:

ng-class="{CSS样式名:关系表达式,...}"

注意只有一个尖括号,不能不写尖括号,也不能写两个尖括号。

ng-style

把键值符合层叠样式表的对象赋给style

ng-submit

将表达式同 onsubmit 事件进行绑定。这个指令同时会阻止默认行为(发送请求并重新加载页面),除非表单不含有 action 属性。

ng-attr-(suffix)

AngularJS编译DOM时会查找花括号 {{ some expression }} 内的表达式。这些表达式会被自动注册到 $watch 服务中并更新到 $digest 循环中,成为它的一部分。有时浏览器会对属性会进行很苛刻的限制。SVG就是一个例子。

<svg>

<circle cx="{{ cx }}"></circle>

</svg>

运行上面的代码会抛出一个错误,指出我们有一个非法属性。可以用 ng-attr-cx 来解决这个问题。注意, cx 位于这个名称的尾部。在这个属性中,通过用 {{ }} 来写表达式,达到前面提到的目的。

<svg>

<circle ng-attr-cx="{{ cx }}"><circle>

</svg>

示例工程:T91

HTML代码:

<!DOCTYPE html>

<html ng-app="myApp">

<head lang="en">

    <meta charset="UTF-8">

    <title>T91</title>

    <script type="text/javascript" src="../vendor/angular.js"></script>

    <script type="text/javascript" src="../controllers/hello.js"></script>

</head>

<body ng-controller="HelloController">

<h1 align="center">

    AngularJS常用内置指令

</h1>

<table border="1px" cellspacing="0" cellpadding="5" rules="all" style="border:solid 1px #0000FF" width="100%" align="center">

    <tr>

        <td width="25%" align="right">链接:</td>

        <td width="75%">

            当锚链接的链接指向的是作用域的变量时,错误的用法:<a href="{{href1}}">我的博客</a></li>

            正确的用法:<a ng-href="{{href2}}">我的博客</a>

        </td>

    </tr>

    <tr>

        <td align="right">图片:</td>

        <td valign="center">

            <div style="height: 64px;vertical-align: middle;line-height: 64px;float:left">这个后台报错:</div>

            <img style="float: left;" width="64px" height="64px" src="{{imgSrc1}}">

            <div style="height: 64px;vertical-align: middle;line-height: 64px;float:left">,没问题的:</div>

            <img width="64px" height="64px" ng-src="{{imgSrc2}}">

        </td>

    </tr>

    <tr>

        <td align="right">启用与禁用:</td>

        <td>

            <button style="width:80px;height: 30px;" ng-click="onButton1Clicked(this)" ng-disabled="isButton1Disabled">{{button1Tip}}</button>

        </td>

    </tr>

    <tr>

        <td align="right">只读</td>

        <td><textarea style="width:98%" rows="5" ng-readonly="isTextarea1Readonly"></textarea></td>

    </tr>

    <tr>

        <td align="right">复选框的值:</td>

        <td><input type="checkbox"

                   value="再点我一下"

                   ng-init="checkbox1Value=true"

                   ng-model="checkbox1Value"

                   ng-checked="checkbox1Value"></td>

    </tr>

    <tr>

        <td align="right">下拉列表框:</td>

        <td>

            <label>选中橘子:<input type="checkbox" ng-model="isSelectedSecond"></label>

            <select ng-readonly="true" ng-disabled="true">

                <option>苹果</option>

                <option ng-selected="isSelectedSecond" >橘子</option>

                <option>桃子</option>

            </select>

        </td>

    </tr>

    <tr>

        <td align="right">包含网页:</td>

        <td>

            <div ng-include="include.html" ng-controller="IncludeController" ng-init="name='李婷'">

                你好,{{name}}

            </div>

        </td>

    </tr>

    <tr>

        <td align="right">ng-switch</td>

        <td>

            <input type="text" ng-model="person1.name" style="float: left;"/>

            <div ng-switch on="person1.name" style="float: left;">

                <span ng-switch-default>胜利者是:</span>

                <span ng-switch-when="李婷">{{ person1.name }}</span>

            </div>

        </td>

    </tr>

    <tr>

        <td align="right">ng-if</td>

        <td>

            <button style="float:left" ng-click="onNgif1Clicked()">增加</button>

            <span style="float:left">{{ngif1}}</span>

            <div ng-if="ngif1%2==0" style="float:left;color:blue">当数字是偶数的时候你才看得见我。</div>

        </td>

    </tr>

    <tr>

        <td align="right">ng-repeat</td>

        <td>

            <table width="80%" border="0" cellpadding="0" cellspacing="0">

                <tr>

                    <th>序号</th>

                    <th></th>

                    <th>第一个</th>

                    <th>中间</th>

                    <th>最后</th>

                    <th>偶数</th>

                    <th>奇数</th>

                </tr>

                <tr ng-repeat="ng in ngrepeat1">

                    <td align="center">{{$index}}</td>

                    <td align="center">{{ng}}</td>

                    <td align="center">{{$first}}</td>

                    <td align="center">{{$middle}}</td>

                    <td align="center">{{$last}}</td>

                    <td align="center">{{$even}}</td>

                    <td align="center">{{$odd}}</td>

                </tr>

            </table>

        </td>

    </tr>

    <tr>

        <td align="right">ng-init</td>

        <td><p ng-init="nginit1='你好,我在HTML中初始化的'">{{nginit1}}</p></td>

    </tr>

    <tr>

        <td align="right">ng-bind</td>

        <td><p ng-bind="ngbind1"></p></td>

    </tr>

    <tr>

        <td align="right">ng-cloak</td>

        <td><p ng-cloak>{{ngcloak1}}</p></td>

    </tr>

    <tr>

        <td align="right">ng-bind-template</td>

        <td><p ng-bind-template="{{ngtemplate1}}{{ngtemplate2}}"></p></td>

    </tr>

    <tr>

        <td align="right">ng-show/ng-hide</td>

        <td>

            <span ng-show="ngshow1">你好</span><button ng-click="onNgshow1Clicked()" style="width:80px;height: 30px;">切换</button>

            <span ng-hide="nghide1">ng-showng-hide</span><button ng-click="onNghide1Clicked()" style="width:80px;height: 30px;">显隐</button>

        </td>

    </tr>

    <tr>

        <td align="right">ng-options1</td>

        <td><div>

            <select ng-model="options1"

                    ng-options="options1.name for options1 in ngoptions1">

                <option value="">选择一个城市</option>

            </select>

            你最喜欢的城市: {{ options1.name }}

        </div></td>

    </tr>

    <tr>

        <td align="right">ng-attr-(stuff)</td>

        <td>

            <table>

                <tr><td>

                    <svg width="300" height="100" version="1.1" >

                        <circle cx="{{ngstuff1}}" cy="50" r="40" stroke="black"  stroke-width="2" fill="red" />

                    </svg>

                </td><td>

                    <svg width="300" height="100" version="1.1" >

                        <circle ng-attr-cx="{{ngstuff1}}" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />

                    </svg>

                </td></tr>

            </table>

        </td>

    </tr>

</table>

</body>

</html>

JS代码:

var module=angular.module("myApp",[]);

 

module.controller("HelloController",function($scope,$timeout){

    $scope.button1Tip="点我试试";

    $scope.isButton1Disabled=false;

    $scope.isTextarea1Readonly=false;

    $scope.checkbox1Value=false;

    $scope.isSelectedSecond=false;

    $scope.person1={

        name:""

    };

    $scope.ngif1=1;

    $scope.onButton1Clicked=function(dom){

        $scope.href1="http://blog.csdn.net/caoshiying?viewmode=contents";

        $scope.href2=$scope.href1;

        $scope.imgSrc1="../images/ghl.jpg";

        $scope.imgSrc2=$scope.imgSrc1;

        console.log("已设置链接。");

 

        $scope.isButton1Disabled=true;

        $scope.isTextarea1Readonly=true;

        $scope.button1Tip="不理你。";

    };

 

    $scope.$watch("checkbox1Value",function(){

        console.log("复选框的值:"+$scope.checkbox1Value);

    });

    $scope.onNgif1Clicked=function(){

        $scope.ngif1+=1;

    };

    $scope.ngrepeat1=["","","","",""];

    $scope.ngbind1="我可以赋值为InnerHTML";

    $scope.ngcloak1="我在路由调用的时候显示的。"

    $scope.ngtemplate1="你好,";

    $scope.ngtemplate2="世界,template bind";

    $scope.ngshow1=true;

    $scope.nghide1=true;

    $scope.onNgshow1Clicked=function(){

        $scope.ngshow1=!$scope.ngshow1;

    };

    $scope.onNghide1Clicked=function(){

        $scope.nghide1=!$scope.nghide1;

    }

    $scope.ngoptions1 = [

        {name: 'Seattle'},

        {name: 'San Francisco'},

        {name: 'Chicago'},

        {name: 'New York'},

        {name: 'Boston'}

    ];

    $scope.options1={};

    $scope.ngstuff1=64;

});

 

module.controller("IncludeController",function($scope){

    $scope.hello="我是另外一个网页。有标准的HTML头。";

});

 

版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

AngularJS内置指令

指令,我将其理解为AngularJS操作HTML element的一种途径。 由于学习AngularJS的第一步就是写内置指令ng-app以指出该节点是应用的根节点,所以指令早已不陌生。 这篇...

AngularJs内置指令

ng-app 每一次用AngularJS都离不开这个指令,顺便说下$rootScope。声明了ng-app的元素会成为$rootScope的起点,而$rootScope是作用域链的根, 通...

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

AngularJS内置指令

由于学习AngularJS的第一步就是写内置指令ng-app以指出该节点是应用的根节点,所以指令早已不陌生。 这篇日志简单记录了一些内置指令,先使用起来,再谈一些有趣的东西。 内置指令 所有的内置指令...

AngularJS内置指令

AngularJS内置指令笔记 最近实验室项目要用到AngularJS,在这里做点笔记吧,遇到的坑都写出来,给同样新手的童鞋们看看。

AngularJS入门之Angular内置指令

闲来无事,整理一些小知识点。前边关入AngularJS中的文章中,也提到了一些ng-app,ng-controlle ... 等一些angular中的指令,今天就详细说一下angular中的内置指令。...

angularjs内置指令

AngularJS快速入门指南20:快速参考 AngularJS指令   本指南中使用过的AngularJS指令:指令 描述 说明 ng-app 定义一个application的根元素。 ...

跟我学AngularJs:AngularJs内置指令大全

内置指令ng-model将表单控件和当前作用域的属性进行绑定。需要注意绑定的scope的范围(父scope与子scope)ng-init该指令被调用时会初始化内部作用域。一般不建议使用此参数ng-ap...

jsp常用指令、基本动作和9种内置对象

Jsp常用指令: <%@page language=”java” contentType=”text/html;charset=gb2312” session=”true” buffer=”64kb...

AngularJS入门 、AngularJS控制器 、AngularJS常见的内置指令

先声明一下,我现在是一名在外培训的学员,主要培训的是H5技术,这几天我刚刚接触AngularJS框架,感觉它使用起来挺方便的,优化了代码,我通过这几天的学习,也稍微了解了一些关于它的一些知识,下面是我...

angularJS系列之指令directive应用实例

代码结构html页面代码 <script src
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)