AngularJS指令

最新推荐文章于 2025-08-14 06:08:41 发布

原创最新推荐文章于 2025-08-14 06:08:41 发布 · 771 阅读

10 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#angular.js #前端 #javascript

HTML5混合APP开发专栏收录该内容

4 篇文章

订阅专栏

指令分类：

1）装饰器型指令

装饰器指令的作用是为DOM添加行为，使其具有某种能力。在AngularS中，大多数内置指令属于装饰器型指令，例如ng-click(单击事件)、ng-hide/ng-show(控制DOM元素的显示和隐藏)等

2）组件型指令

组件型指令是一个小型的整体，其中包含业务所需要显示的视图和交互逻辑，例如开发者要在页面添加某个功能

1、常用的内置指令

1.1 程序控制类

1.2 数据绑示类

<body ng-app="myApp" ng-controller="myCtrl">

    姓名：<input type="text" ng-model="name">
    <hr><!-- 差值表达式{{ }} -->
    <span>输入的姓名为：{{ name }}</span>
    <hr><!-- ng-bind指令 -->
    <span ng-bind="name">输入的姓名为：</span>

    <hr><!-- ng-model指令 -->
    姓名：<input type="text" ng-model="name+'666'">
    
</body>
</html>
<script>
    var app= angular.module('myApp',[]);
    app.controller('myCtrl',function($scope){
        // 定义属性name
        $scope.name = "lucy";
    });
</script>

1.3 访问流程类

1) ng-if

语法格式：

<element ng-if="expression"></element>

示例：

<body ng-app="myApp" ng-controller="myCtrl">

    篮球：<input type="checkbox" ng-model="isCheck">
    <div ng-if="isCheck">
        喜欢<input type="radio" name="hobby">
        一般<input type="radio" name="hobby">
        讨厌<input type="radio" name="hobby">
    </div>

</body>
</html>
<script>
    var app= angular.module('myApp',[]);
    app.controller('myCtrl',function($scope){
        $scope.isCheck = false;
    });
</script>

2) ng-switch

语法格式：

<element ng-switch on="expression">
    <element ng-switch-when="expression1">...</element>
    <element ng-switch-when="expression1">...</element>
    ...
    <element ng-switch-default>...</element>
</element>

示例：实现每日食谱

<body ng-app="myApp" ng-controller="myCtrl">

    <div ng-switch on="day">
        周{{ day }}食谱
        <div ng-switch-when="1">食品1</div>
        <div ng-switch-when="2">食品2</div>
        <div ng-switch-when="3">食品3</div>
        <div ng-switch-when="4">食品4</div>
        <div ng-switch-when="5">食品5</div>
        <div ng-switch-when="6">食品6</div>
        <div ng-switch-default>食品7</div>
    </div>

</body>
</html>
<script>
    var app= angular.module('myApp',[]);
    app.controller('myCtrl',function($scope){
        let day = new Date().getDay();
        $scope.day = day;
    });
</script>

3) ng-repeat

语法格式：

<element ng-repeat="item in collection"></element>

注意：当数组中有重复元素时，需要使用 track by $index

示例：

<body ng-app="myApp" ng-controller="myCtrl">

    <ul>
        <li ng-repeat="item in datas">
           {{item }} 
        </li>
    </ul>
    
</body>
</html>
<script>
    var app= angular.module('myApp',[]);
    app.controller('myCtrl',function($scope){
        $scope.datas = [10,20,30,40];
    });
</script>

1.4 事件绑定类

AngularJS指令不会覆盖JavaScript的事件，例如鼠标单击HTML元素时，ng-click指令与JavaScript的 on-click 事件将都会执行。

1.5 状态设置类

1.6 加载处理类

2、自定义指令

2.1 基本语法

AngularJS中使用模块的 directive() 函数来自定义指令

var app = angular.module('app',[]);
app.directive('指令名称',function(){
    return{
        template,
        templateUrl,
        replace ,
        restrict,
        ...
    }
})