一，Angular自定义指令

来源：互联网发布：读取股票数据编辑：程序博客网时间：2024/04/30 03:44

Angular指令

Angular不仅可以使用例如ng-app,ng-init,ng-repeat,ng-model,ng-bind等一些默认的指令，在Angular中还可以自定义一些自己需要的指令，可以使用 .directive 函数来添加自定义的指令。要调用自定义指令，HTML 元素上需要添加自定义指令名。使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>angular自定义指令</title></head><body><div ng-app="customer_directive">    <default-directive></default-directive></div></body><script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"><script>    var app = angular.module("customer_directive",[]);    app.directive("defaultDirective",function () {        return{            template:"<h1>默认自定义指令</h1>"        };    });</script>

Angular自定义指令的限制

可以通过以下几种方式调用指令

元素名(E)
属性(A)
类名(C)
注释(M)

默认的调用方式EA,也就是可以通过元素名和属性名来调用指令

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>angular自定义指令</title></head><body><div ng-app="customer_directive">    <default-directive></default-directive>    <div class="class-directive"></div>    <p attr-directive></p>    </div></body><script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script><script>    var app = angular.module("customer_directive",[]);    app.directive("defaultDirective",function () {        return{            template:"<h1>默认自定义指令</h1>"        };    });    app.directive("classDirective",function () {        return{            restrict:"C",            template:"<h1>自定义类指令</h1>"        };    });    app.directive("attrDirective",function () {        return{            restrict:"A",            template:"<h1>自定义属性指令</h1>"        };    });    app.directive("markDirective",function () {        return{            restrict:"M",            replace:true,            template:"<h1>自定义注释指令</h1>"        };    });</script></html>

0 0