Angularjs API整理(二) directive篇(指令)

最新推荐文章于 2018-08-04 17:11:15 发布

明天你好丶

最新推荐文章于 2018-08-04 17:11:15 发布

阅读量672

点赞数

文章标签： angularjs api 入门总结整理

本文链接：https://blog.csdn.net/qq_30073735/article/details/71079479

版权

指令的作用：实现语义化标签

先说说自定义标签的用法。--------------model.directice("xxxx",funtionc(){})

这个资料写的非常完整且易懂，大家可以去看看。

然后是各个ng指令，这里不详细一一细说，大部分的菜鸟教程都有点这里。

这里只记录一些，我自己觉得常用的和菜鸟教程没有的。

ng-bind-html 用于绑定包含HTML标签的文档，使用方式：

(注意：要引入 "angular-santize.js" 模块，使用 ngSanitize 函数来检测代码的安全性。)

13. ngBindTemplate

用于告诉 AngularJS 将给定表达式的值替换 HTML 元素的内容。

当你想在 HTML 元素上绑定多个表达式时可以使用 ng-bind-template 指令。

<div ng-app="myApp" ng-bind-template="{{firstName}} {{lastName}}" ng-controller="myCtrl"></div> //xxxxxxxxxxxxxx

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>

(注意：使用ng-bind-template后，ng-model、ng-bind、{{}} 失效)

14. ngBlur

元素在失去焦点时需要执行的表达式。

菜鸟教程有例子

<input ng-blur="count = count + 1" ng-init="count=0" />

<h1>{{count}}</h1>

15. ngChange
16. ngChecked

17. ngClass

ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类。

ng-class 指令的值可以是字符串，对象，或一个数组。

1.如果是字符串，多个类名使用空格分隔。

2.如果是数组，可以由字符串或对象组合组成，数组的元素可以是字符串或对象。

3.如果是对象，需要使用 key-value 对，key 为你想要添加的类名，value 是一个布尔值。只有在 value 为 true 时类才会被添加。

菜鸟教程的例子：是通过选择器，触发选择的样式。

这里举一个，数组的方式。

function Ctr($scope) { 
    $scope.isActive = true;
}

<div ng-class="{true: 'active', false: 'inactive'}[isActive]">
</div>  //通过isActive的值，来确定 使用true或者false情况下的Css

这里举一个，键值对 key-value 的方式。

function Ctr($scope) { 

}

<div ng-class {'selected': isSelected, 'car': isCar}">
</div>

当 isSelected = true 则增加selected class，
当isCar=true,则增加car class，
所以你结果可能是4种组合。

18. ngClassEven(偶数) 和ngClassOdd(奇数)

ng-class-even/odd 指令用于为 HTML 元素动态的绑定一个或多个 CSS 类，但只作用于偶数/奇数行。

ng-class-even/odd 指令需要与 ng-repeat 指令搭配使用。

ng-class-even/odd 指令建议用在表格的样式渲染中，但是所有HTML元素都是支持的。

eg:

<table ng-controller="myCtrl">
<tr ng-repeat="x in records" ng-class-even="'striped'">
    <td>{{x.Name}}</td>
    <td>{{x.Country}}</td> 
</tr>
</table>

20. ngClick
21. ngCloak

在做angular的SPA开发时，我们经常会遇见在如Chrome这类能够快速解析的浏览器上出现表达式({{ express }} ),或者是模块(div)的闪烁。对于这个问题由于JavaScript去操作DOM，都会等待DOM加载完成（DOM ready）。对于angular会在DOM ready完会才回去解析html view Template，所以对于Chrome这类快速的浏览器你会看见有闪烁的情况出现。而对于IE7，8这类解析稍慢的浏览器大部分情况下是不会出现这个问题的。

在angular中为我们提供了ng-cloak来实现纺织闪烁的方案，我们只需要在需要的地方加上ng-cloak。同时对于bing文字({{ express }} )我们也可以改为ng-bind来实现避免。

22. ngController
23. ngCopy

ng-copy 指令用于告诉 AngularJS 在 HTML 元素文本被拷贝时要执行的操作。

ng-copy 指令不会覆盖元素的原始 oncopy 事件, 事件触发时，ng-copy 表达式与原始的 oncopy 事件将都会执行。

eg:

<input ng-copy="count = count + 1" ng-init="count=0" value="Copy this text" />

当值被复制一次，count就加1

24.    ngCsp
25.    ngCut（当被剪切时，触发事件）
26.    ngDblclick（当双击时，触发事件）
27.    ngDisabled

指令设置表单输入字段的 disabled 属性(input, select, 或 textarea)。

如果 ng-disabled 中的表达式返回 true 则表单字段将被禁用。

例子看菜鸟教程：通过点击按钮使所有输入框被禁用。

28.    ngFocus（每次获取焦点时，触发事件）
29.    ngForm
30.    ngHide
31.    ngHref
32.    ngIf
33.    ngInclude
34.    ngInit
35.    ngKeydown ngKeypress ngKeyup

ng-keypress 指令用于告诉 AngularJS 在指定 HTML 元素上按下按键时需要的操作。

ng-keypress 指令不会覆盖元素的原生 onkeypress 事件, 事件触发时，ng-keypress 表达式与原生的 onkeypress 事件将都会执行。

按键敲击的事件顺序:

Keydown
Keypress
Keyup

38.    ngList
39.    ngModel
40.    ngMousedown (按下鼠标按键时的行为)
41.    ngMouseenter (鼠标穿过时的行为)
42.    ngMouseleave（鼠标离开时的行为）
43.    ngMousemove（鼠标指针在目标范围移动时的行为）
44.    ngMouseover（鼠标移动到目标范围时的行为）
45.    ngMouseup（在元素上松开鼠标的行为）
46.    ngNonBindable

ng-non-bindable 指令用于告诉 AngularJS 当前的 HTML 元素或其子元素不需要编译。

47. ngOpen

ng-open 指令用于设置 details 列表的 open 属性。

如果 ng-open 的表达式返回 true 则 details 列表是可见的。

48.    ngPaste（规定粘贴事件的行为）
49.    ngPluralize
50.    ngReadonly
51.    ngRepeat
52.    ngSelected
53.    ngShow
54.    ngSrc
55.    ngSrcset
56.    ngStyle
57.    ngSubmit
58.    ngSwitch

指令根据表达式显示或隐藏对应的部分。

对应的子元素使用 ng-switch-when 指令，如果匹配选中选择显示，其他为匹配的则移除。

你可以通过使用 ng-switch-default 指令设置默认选项，如果都没有匹配的情况，默认选项会显示。

59.    ngTransclude
60.    ngValue
61.    script
62.    select
63.    textarea

明天你好丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Angularjs API整理(二) directive篇(指令)

先说说自定义标签的用法。--------------model.directice("xxxx",funtionc(){}) 这个资料写的非常完整且易懂，大家可以去看看。然后是各个ng指令，这里不详细一一细说，大部分的菜鸟教程都有点这里。这里只记录一些，我自己觉得常用的和菜鸟教程没有的
复制链接

扫一扫