转自：https://www.cnblogs.com/best/tag/Angular/

1.

元素名

<runoob-directive></runoob-directive>

属性

<div runoob-directive></div>

类名

<div class="runoob-directive"></div>

注释

<!-- directive: runoob-directive -->
 
 <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 class="runoob-directive"></div>

        <script>

             var app =  angular.module('myApp',[]);

            app.directive("runoobDirective",function(){

                return {

                    restrict:"C",

                    template:'<h1>自定义指令</h1>'

                };

            });

         </script>

 </body>

 </html>

restrict 值可以是以下几种:

  • E 作为元素名使用
  • A 作为属性使用
  • C 作为类名使用
  • M 作为注释使用

restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

37.创建自定义的指令的限制使用 通过restrict 设置的更多相关文章

  1. angularjs 创建自定义的指令

    创建自定义的指令 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTMl 元素上需要添加自定义指令名 ...

  2. 36.创建自定义的指令directive

    转自:https://www.cnblogs.com/best/tag/Angular/ 1. <html> <head> <meta charset="utf ...

  3. 带你走近AngularJS - 创建自定义指令

    带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...

  4. 带你走近AngularJS 之创建自定义指令

    带你走近AngularJS 之创建自定义指令 为什么使用AngularJS 指令? 使用过 AngularJS 的朋友应该最感兴趣的是它的指令.现今市场上的前端框架也只有AngularJS 拥有自定义 ...

  5. VSCode创建自定义代码段

    上一篇:PyCharm创建自定义代码段(JetBrains系列通用) 设置方法 很简单,快速过一下,F1,然后输入snippets 然后选择对应语言 Python案例 内容和使用: { // pref ...

  6. Dockerfile创建自定义Docker镜像以及CMD与ENTRYPOINT指令的比较

    1.概述 创建Docker镜像的方式有三种 docker commit命令:由容器生成镜像: Dockerfile文件+docker build命令: 从本地文件系统导入:OpenVZ的模板. 关于这 ...

  7. AngularJS -- 指令(创建自定义指令)

    点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/   什么是指令 注:本指南是针对已经熟悉AngularJS基础知识的开发人员.如果你才刚 ...

  8. 在vue中创建自定义指令

    原文:https://dev.to/ratracegrad/creating-custom-directives-in-vue-58hh 翻译:心上有杨 指令是带有 v- 前缀的特殊属性.指令的作用是 ...

  9. Vue2.0的变化 ，组件模板，生命周期，循环，自定义键盘指令，过滤器

    组件模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </templat ...

随机推荐

  1. angular-应用

    什么是SPA 真正的 AngularJS 单页 Web 应用(single page web application,SPA) 一些基础概念 <html> 元素是 AngularJS 应用 ...

  2. jQuery调用WebService （ 同源调用）

    转自原文 jQuery调用WebService 1.编写4种WebService方法     [WebService(Namespace = "http://tempuri.org/&quo ...

  3. 敏捷自己主动化单元測试 (从前台 JavaScript 至后台 Java)

    此份材料的内容适用于前台 JavaScript 与后台 Java 的单元測试◦ 希望, 能协助开发者可在最短的时间内, 开展单元測试的工作◦ 附件: 敏捷自己主动化单元測试 例子代码: QUnit 例 ...

  4. iOS开发之十万个为什么&lt;1&gt;

    郝萌主倾心贡献,尊重作者的劳动成果,请勿转载. 假设文章对您有所帮助.欢迎给作者捐赠,支持郝萌主,捐赠数额任意,重在心意^_^ 我要捐赠: 点击捐赠 Cocos2d-X源代码下载:点我传送 游戏官方下 ...

  5. Compiler Warning (level 2) CS0436

    https://docs.microsoft.com/en-us/dotnet/csharp/misc/cs0436 // CS0436_a.cs // compile with: /target:l ...

  6. 133.throw机制 抛出类类型

    #include <iostream> using namespace std; //try尝试执行,抛出throw,throw之后语句不再执行 //catch处理throw的异常 voi ...

  7. NPInter数据集的奇葩标号的出坑秘籍

    这篇恐怕是有始以来命名最无奈标题了.需要写一下攻略. 业内人士都熟知NPInter,但是该数据库一直以来访问受限.不过终于能访问得到数据集. 但是蛋疼的是2.0的数据库id的命名方法实在奇葩,想了很多 ...

  8. （转载）Android学习之Intent使用

    ndroid学习之Intent使用   1.使用显示Intent Intent intent = new Intent(FirstActivity.this,SecondActivity.class) ...

  9. MySQL学习(六)——自定义连接池

    1.连接池概念 用池来管理Connection,这样可以重复使用Connection.有了池,我们就不用自己来创建Connection,而是通过池来获取Connection对象.当使用完Connect ...

  10. vmware workstation中的NAT配置

    宿主机:win10: IP:192.168.1.101 GW:192.168.1.1 以太网2(VMNET8) IP:192.168.100.1 GW:nonevmware中的虚拟网络设置(NAT): ...