AngularJS之指令

最新推荐文章于 2024-05-13 14:54:25 发布

zhu jun~

最新推荐文章于 2024-05-13 14:54:25 发布

阅读量259

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/zhujun_xiaoxin/article/details/52563781

AngularJS中指令，可以简单地理解为绑定在dom上的函数，在html编译时会被执行。

1、指令声明：

directive("yourDirectiveName",function(){});

指令通过directive函数来声明，该函数有两个参数，第一个参数表示的是你定义的指令名称，这里的名称必须采用驼峰命名的方式。第二个参数是一个函数，返回一个js对象。

2、指令的调用:

指令的调用方式有四种：

1) 元素的方式

2) 属性的方式

3) class的方式

4) 注释的方式

下面结合一个例子来看看指令的声明和调用：

1、example.html

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <title>my-directive</title>
        <meta charset="UTF-8">
        <script src="../../js/angular.min.js"></script>
    </head>
    <body>
        <div my-directive></div>
        <script>
            angular.module('myApp',[])
                .directive('myDirective', function() {
                return {
                    restrict:"A",
                    template: '<a href="http://www.baidu.com">\
                    Click me to go to Baidu</a>'
                    };
                });
        </script>
    </body>
</html>