【Angular】——指令

最新推荐文章于 2023-12-31 19:35:31 发布

杨小嘿

最新推荐文章于 2023-12-31 19:35:31 发布

阅读量447

点赞数

分类专栏：【前端】 ————AngularJS 文章标签： Angularjs 指令

本文链接：https://blog.csdn.net/yxflovegs2012/article/details/73927663

版权

【前端】同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

————AngularJS

2 篇文章 0 订阅

订阅专栏

在博客《AngularJS-mvc》中对指令已经有一个大概的认识，Angular内置的指令一般是以ng-*的形式存在，指令可使得我们方便快捷的达到想要的前台效果，内置指令的使用可以通过Angular提供的官方API学习使用。而Angular最吸引人的地方是用户可以自定义指令。首先我们来认识一下自定义指令中几个参数的含义。

自定义指令：

使用module .directive(“指令名称”，function(){}）来添加自定义的指令。

要调用自定义指令，HTML元素上需要添加自定义指令名。使用驼峰法来命名一个指令例如： runoobDirective, 在页面使用时需要以 - 分割, runoob-directive。具体如下——

<body ng-app="myApp">
   <runoob-directive></runoob-directive>  <!--调用-->
   <script>
       var app = angular.module("myApp",[]);
 
       app.directive("runoobDirective",function() {
          return {
              restrict : "A",
              template :"<h1>这里写的是要显示在页面的内容</h1>"//templateUrl:temp.html
 
        };
      });
   </script>
</body>

restrict 值可以是以下几种:

E 作为元素名使用

A 作为属性使用（默认方式）

C 作为类名使用

M 作为注释使用

调用：

元素名：<runoob-directive></runoob-directive>

属性： <divrunoob-directive></div>

类名： <divclass="runoob-directive"></div>

注释： <!--directive: runoob-directive - ->

以下为自定义指令hello不同调用方式的实例图：