AngularJS——第3章指令-CSDN博客

本文介绍了AngularJS中的指令概念，包括内置指令如ng-app、ng-controller等的用途与示例，并展示了如何自定义指令。

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

第3章指令

所谓指令就是AngularJS自定义的HTML属性或标签，这些指令都是以ng-做为前缀的，例如ng-app、ng-controller、ng-repeat等。

3.1 内置指令

ng-app 指定应用根元素，至少有一个元素指定了此属性。
ng-controller 指定控制器
ng-show控制元素是否显示，true显示、false不显示
ng-hide控制元素是否隐藏，true隐藏、false不隐藏
ng-if控制元素是否“存在”，true存在、false不存在
ng-src增强图片路径
ng-href增强地址
ng-class控制类名
ng-include引入模板
ng-disabled表单禁用
ng-readonly表单只读
ng-checked单/复选框表单选中
ng-selected下拉框表单选中
【示例1】

<body ng-app="App">  <!--指定应用根元素，至少有一个元素指定了此属性-->

<!--由于浏览器加载顺序问题，显示内容时会产生闪烁-->

    <ul ng-controller="DemoController">  <!--定义控制器-->
        <li ng-bind="name">绑定数据变量，显示结果与{{name}}一样</li>
        <li>{{name}}</li>
        <li ng-show="1">ng-show用来显示过程隐藏内容的，当值为true时显示</li>
        <li ng-hide="1">ng-hide用来隐藏内容，当值为true时隐藏</li>
        <li ng-if="1">ng-if用来控制元素是否存在，当值为true时存在</li>
        <li><img ng-src="{{path}}" alt="">ng-src用来增强图片路径，使用ng-src而不适用src的原因是src在页面从上到下加载时就会直接请求src的资源，如果所给的是像path这样的变量路径，那么在第一次请求之后没有请求到需要的内容，在执行到script时还会再加载一遍，浪费资源，而ng-src不会直接被浏览器识别，只有在script的内容加载玩后才会显示，href同理</li>
        <li ng-class="{red:true}">控制类名：ng-class="{}"中单括号表示对象</li>
    </ul>

    <script src="./libs/angular.min.js"></script>
    <script>

        //创建Model
        var App = angular.module('App', []);
        
        //Controller
        App.controller('DemoController', ['$scope', function ($scope) {

            //$scope
            $scope.name = 'itcast';
            $scope.path = './images/author.jpg';
            $scope.link = '#';
            $scope.red= 'red';

        }]);

    </script>
</body>

【示例2】ng-include

<body ng-app="App">

    <div ng-include="'./header.html'"></div>

    <section>主体</section>

    <div ng-include="'./footer.html'"></div>

    <script src="./libs/angular.min.js"></script>
    <script>

        var App = angular.module('App', []);

    </script>
</body>

3.2 自定义指令

语法：App.directive('tag', function(){});
示例：

// 通过模块实例对象的directive方法可以自定义指令
App.directive('tag', function () {

    // 返回一个对象，这个对象就是自定义指令相关的内容
    return {
        // E element——元素
        // A attribute——属性
        // C class——类
        // M mark replace——备注，必须为true
        restrict: 'ECMA',
        // template: '<ul><li>首页</li><li>列表</li></ul>',
        templateUrl: './list.html'
        // replace: true
    }

});

转载于:https://www.cnblogs.com/luoyu113/p/8544681.html