neu asset fun http png 一个 4.6 line
除了 AngularJS 内置的指令外,我们还可以创建自定义指令。
你可以使用 .directive 函数来添加自定义的指令。
要调用自定义指令,html 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js">
- </script>
- </head>
- <body ng-app="myApp">
- <runoob-directive>
- </runoob-directive>
- <script>
- var app = angular.module("myApp", []);
- app.directive("runoobDirective",
- function() {
- return {
- template: "<h1>自定义指令!</h1>"
- };
- });
- </script>
- </body>
- </html>
你可以通过以下方式来调用指令:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js">
- </script>
- </head>
- <body ng-app="myApp">
- <runoob-directive>
- </runoob-directive>
- <div runoob-directive>
- </div>
- <div class="runoob-directive">
- </div>
- <!-- directive: runoob-directive -->
- <script>
- var app = angular.module("myApp", []);
- app.directive("runoobDirective",
- function() {
- return {
- restrict: "EACM",
- template: "<h1>自定义指令!</h1>"
- };
- });
- </script>
- </body>
- </html>
restrict 值可以是以下几种:
作为元素名使用
- E
作为属性使用
- A
作为类名使用
- C
作为注释使用
- M
restrict 默认值为
, 即可以通过元素名和属性名来调用指令。
- EA
AngularJS:directive 自定义的指令
来源: http://www.bubuko.com/infodetail-2014029.html