Angular 自定义指令详解-优快云博客

本文链接：https://blog.youkuaiyun.com/stopcpp/article/details/56288864

本文深入探讨Angular中的自定义指令，介绍如何创建、使用及理解自定义指令的生命周期钩子，展示其实现组件交互和视图操作的强大能力。

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>自定义指令</title>
        <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
    </head>
    <body ng-app="demoApp">
        <!-- <yixiaoButton></yixiaoButton> -->
        <yixiao-button></yixiao-button>
        <btn-primary></btn-primary>
        <btn-danger></btn-danger>
        <btn-success></btn-success>
        <script src="bower_components/angular/angular.js"></script>
        <script>
            var demoApp = angular.module('demoApp', []);
            //第一个参数是指令的名字，第二个参数仍然应该使用一个数组，数组的最后一个元素是一个函数
            //定义指令的名字，应该使用驼峰命名法
            demoApp.directive('yixiaoButton', [function(){
                //该函数应该返回一个指令对象
                return{
                    template:'<input type="button" value="yixiao" class="btn btn-lg btn-primary btn-block" />'
                };
            }]);
            demoApp.directive('btnPrimary', [function(){
                //该函数应该返回一个指令对象
                return{
                    template:'<input type="button" value="btnPrimary" class="btn btn-primary" />'
                };
            }]);
            demoApp.directive('btnDanger', [function(){
                //该函数应该返回一个指令对象
                return{
                    template:'<input type="button" value="btnDanger" class="btn btn-danger" />'
                };
            }]);
            demoApp.directive('btnSuccess', [function(){
                //该函数应该返回一个指令对象
                return{
                    template:'<input type="button" value="btnSuccess" class="btn btn-success" />'
                };
            }]);
        </script>
    </body>
</html>

ng-自定义指令