AngularJS指令

时间：2017-01-06 15:33:18 阅读：272 评论：0 收藏：0 [点我收藏+]

1.　　AngularJS指令的特点：

AngularJS通过被称为指令的新属性来扩展HTML，指令的前缀为ng-。
AngularJS通过内置的指令来为应用添加功能。
AngularJS允许你自定义指令。

2.　　下面介绍下常见的AngularJS指令：

ng-app指令：定义了AngularJS 应用程序的根元素。在网页加载完毕时会自动引导（自动初始化）应用程序。
ng-init指令：为 AngularJS 应用程序定义了初始值。通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。
ng-model指令：绑定HTML元素到应用程序数据。也可以为应用程序数据提供类型验证（number、email、required）、为应用程序数据提供状态（invalid、dirty、touched、error）、为 HTML 元素提供 CSS 类、绑定 HTML 元素到 HTML 表单。

ng-repeat指令：对于集合中（数组中）的每个项会克隆一次HTML元素。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/angular.min.js"></script>
    </head>

    <body ng-app="">
        <div ng-init="quantity=1;price=5"></div>
        <h2>价格计算器</h2>
        数量: <input type="number" ng-model="quantity">
        价格: <input type="number" ng-model="price">

        <p><b>总价:</b> {{quantity * price}}</p>
        
        <div ng-init="students=[
            {name:‘小明‘,class:‘一年级一班‘},
            {name:‘小红‘,class:‘一年级二班‘},
            {name:‘小方‘,class:‘一年级三班‘}
        ]">
            <p>循环对象</p>
            <ul>
                <li ng-repeat="x in students">
                    {{x.name+" "+x.class}}
                </li>
            </ul>
        </div>
    </body>
</html>

技术分享

3.　　创建自定义的指令：

除了 AngularJS 内置的指令外，我们还可以创建自定义指令。
我们可以使用 .directive 函数来添加自定义的指令。
要调用自定义指令，HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令，myDirective，但是在使用的时候要用-分割开，my-directive。
使用自定义指令有四种方式,可以通过restrict属性来限制使用，E 作为元素名使用、C 作为类名使用、A 作为属性使用、M 作为注释使用。
- 通过元素名：
```
<my-directive></my-directive>
```
- 通过类名：必须设置 restrict 的值为 "C" 才能通过类名来调用指令。
```
<div class="my-directive"></div>
```
- 通过属性：
```
<div my-directive></div>
```
- 通过注释：我们需要在该实例添加 replace 属性，否则是不可见的。
```

```

案例展示：这里是通过元素名的方式来使用自定义指令，别的方式大家可以自行尝试。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/angular.min.js"></script>
    </head>

    <body ng-app="myApp">
        <my-directive></my-directive>
        
        <script>
        var app = angular.module("myApp", []);
        app.directive("myDirective", function() {
            return {
                template: "<h1>这是我的自定义指令!</h1>"
            };
        });
    </script>
    </body>
</html>

技术分享

AngularJS指令

原文：http://www.cnblogs.com/wgl1995/p/6256269.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)