首页 > 代码库 > AngularJs 指令

AngularJs 指令

2024-09-15 20:18:09   218人阅读

AngularJs 指令：是带有ng前缀的HTML属性；内置属性为应用添加功能；允许自定义指令。

ng-app指令：初始化一个AngularJs应用程序；

　　　　　　一个网页可以包含多个运行在不同元素中的AngularJs应用程序

ng-init指令：初始化应用程序数据；---在网页加载完毕时会自动初始化应用程序

ng-model指令：讲述输入域的值绑定到应用程序；

ng-repeat指令：对于集合中(数组中)的每一项都会克隆一次HTML元素；

    <div ng-app = "angu" ng-controller="myCtro">
        <p>爱好：</p>
        <ul>
            <li ng-repeat="x in habbits">
                {{x.habbit}}
            </li>
        </ul>
    </div>
    <script>
        var app = angular.module("angu",[]);
        app.controller("myCtro",function($scope){
            $scope.habbits = [
                { habbit : "sing"},
                { habbit : "dance"},
                { habbit : "draw"}
            ]
        })
    </script>

ng-model指令作用：

　　1.可以为应用程序提供类型验证(number、email、required).

　　2.为应用程序数据提供状态.

　　3.为HTML元素提供CSS类.

　　4.绑定HTML元素到HTML表单.

AngularJs 数据绑定：同步了AngularJs表达式与AngularJs数据

    <div ng-app = "angu" ng-controller="myCtro" ng-init="firstName=‘John‘">
        <input type="text" ng-model="firstName">
        <p> 
            姓名：<span >{{firstName}}</span>
        </p>
    </div>
    <script>
        var app = angular.module("angu",[]);
        app.controller("myCtro",function($scope){

        })
    </script>

{{firstName}}是通过ng-model="firstName"进行同步的；

    <div ng-app = "angu" ng-controller="myCtro">
        <input type="text" ng-model="quantity">
        <input type="text" ng-model="price">
        <p> 
            总计：<span >{{quantity * price}}</span>元
        </p>
    </div>
    <script>
        var app = angular.module("angu",[]);
        app.controller("myCtro",function($scope){
            $scope.quantity = "5";
            $scope.price = "2";
        })
    </script>

AngularJs 创建自定义指令

自定义指令---使用.directive函数来添加自定义指令.

要调用自定义指令, HTML元素上需要添加自定义指令名.

使用驼峰命名法来命名一个指令---oldstreetDirective,但是在使用他的时候需要用-分割---oldstreet-directive;

    <div ng-app = "angu" ng-controller="myCtro">
        <p>爱好：</p>
        <div oldstreet-directive></div>
        <oldstreet-directive></oldstreet-directive>
        <ul>
            <li ng-repeat="x in habbits">
                {{x.habbit}}
            </li>
        </ul>
    </div>
    <script>
        var app = angular.module("angu",[]);
        app.directive("oldstreetDirective",function(){
            return {
                template : "我是自定义指令!"
            }
        })
        app.controller("myCtro",function($scope){
            $scope.habbits = [
                { habbit : "sing"},
                { habbit : "dance"},
                { habbit : "draw"}
            ]
        })
    </script>

自定义指令的限制使用 

通过添加restrict属性，并设置值为“A”，来设置指令只能通过属性的方式来调用

    <div ng-app = "angu" ng-controller="myCtro">
        <p>爱好：</p>
        <div oldstreet-directive></div>
        <oldstreet-directive></oldstreet-directive>
        <ul>
            <li ng-repeat="x in habbits">
                {{x.habbit}}
            </li>
        </ul>
    </div>
    <script>
        var app = angular.module("angu",[]);
        app.directive("oldstreetDirective",function(){
            return {
                restrict : "A",
                template : "我是自定义指令!"
            }
        })
        app.controller("myCtro",function($scope){
            $scope.habbits = [
                { habbit : "sing"},
                { habbit : "dance"},
                { habbit : "draw"}
            ]
        })
    </script>

restrict 的值可以是以下几种：

E---作为元素名使用;

A---作为属性使用;

C---作为类名使用;

M---作为注释使用;

restrict 默认值是EA，即可以通过元素名和属性名来调用指令.

调用方式分别为：

    元素名
    <oldstreet-directive></oldstreet-directive>
    属性
    <div oldstreet-directive></div>
    类名
    <div class="oldstreet-directive"></div>
    注释
    <!-- directive：oldstreet-directive -->

 

AngularJs 指令


联系
我们