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

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

原创最新推荐文章于 2018-08-04 17:11:15 发布 · 710 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs #api #入门 #总结 #整理

本文详细介绍AngularJS中的多种指令，包括ng-bind-html、ng-bind-template、ng-class等，并提供实际应用场景及代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

先说说自定义标签的用法。--------------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>