<!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" ng-init="obj={ a:1,b:2,firstName:'guanghan',lastName:'xue'}">

    <div >

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

    </div>

    <script>

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

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

            return {

                restrict: 'C',//表示使用class匹配 默认使用标签匹配 即 <runoob-directive></runoob-directive>

                template: "<h1>自定义指令!</h1>"//这是对应得输出html模板

            };

        });

    </script>

</body>

</html>

　　也可以这样使用

<div runoob-directive></div> 使用属性匹配restrict不要填就行了

angularJS 使用自定义指令输出模板的更多相关文章

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

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

  2. 走进AngularJs(五)自定义指令----（下）

    自定义指令学习有段时间了,学了些纸上谈兵的东西,还没有真正的写个指令出来呢...所以,随着学习的接近尾声,本篇除了介绍剩余的几个参数外,还将动手结合使用各参数,写个真正能用的指令出来玩玩. 我们在自定 ...

  3. 走进AngularJs(三)自定义指令-----（上）

    一.有感而发的一些话 在学习ng之前有听前辈说过,angular上手比较难,初学者可能不太适应其语法以及思想.随着对ng探索的一步步深入,也确实感觉到了这一点,尤其是框架内部的某些执行机制,其复杂程度 ...

  4. angularJS中自定义指令

    学习了angularJS一周,但是大部分时间被自定义指令占用了.博主表示自学互联网好心塞的,发现问题的视觉很狭窄,这比解决问题要更难.这篇文章首先介绍了自定义,然后介绍了在使用自定义指令遇到的问题. ...

  5. AngularJS笔记--自定义指令

    在前端开发中, 我们会遇到很多地方都会用到同一种类型的控件.AngularJS提供了自定义指令功能,我们可以在指令里面定义特定的html模板.提供给前台html调用. 一. 指令的简单定义.  下面定 ...

  6. 走进AngularJs(四)自定义指令----（中）

    上一篇简单介绍了自定义一个指令的几个简单参数,restrict.template.templateUrl.replace.transclude,这几个理解起来相对容易很多,因为它们只涉及到了表现,而没 ...

  7. angular -- 自定义指令和模板

    angular 可以自定义一些指令,来简化我们前端的工作量. 第一种:简单指令示例: <h3>自定义指令</h3> <sheng></sheng> &l ...

  8. angularjs Directive自定义指令详解

    作用:需要用Directive有下面的情景: 1.使你的Html更具语义化,不需要深入研究代码和逻辑即可知道页面的大致逻辑. 2. 抽象一个自定义组件,在其他地方进行重用. 3.使用公共代码,减少重复 ...

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

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

随机推荐

  1. 【二分】Codeforces Round #435 (Div. 2) D. Mahmoud and Ehab and the binary string

    题意:交互题:存在一个至少有一个0和一个1的长度为n的二进制串,你可以进行最多15次询问,每次给出一个长度为n的二进制串,系统返回你此串和原串的海明距离(两串不同的位数).最后要你找到任意一个0的位置 ...

  2. SourceTree运行慢的解决方案

    以下两个Git命令可以解决SourceTree运行慢: git gc git prune 可以在SourceTree点击命令行模式打开Git命令行窗口输入,等待片刻执行完成,SourceTree的运行 ...

  3. [转]解析UML建模语言中的UML图分类、 UML各种图形及作用

    本文向大家介绍一下UML图分类,作为一种建模语言,UML的定义包括UML语义和UML表示法两个部分. UML图大致可分为五类,共有九种图形. AD: 本文和大家重点讨论一下UML图分类,标准建模语言U ...

  4. MYSQL复习笔记9-存储过程

    date: 20140208auth: Jin参考引用:http://blog.sina.com.cn/s/blog_52d20fbf0100ofd5.html mysql存储过程详解一.基本介绍1. ...

  5. 在XC2440的uboot中挂载U盘，利用FAT文件系统读写U盘文件

    转:http://blog.chinaunix.net/uid-22030783-id-3347608.html 在XC2440的uboot_V1.3版本中已经支持USB HOST驱动和FAT文件系统 ...

  6. Calico网络策略实践

    因为Kubernetes官方用的flannel无法实现多租户环境下的网络隔离,建立起来的pod之间实际可以相互访问,而Calico可以实现,因此周末找个时间试了一下大概的过程. 前面的kubernet ...

  7. 用LaTeX写线性规划

    线性规划由目标函数和若干约束构成,Latex中并没有直接的命令来写线性规划.简单的做法是使用＼begin{eqnarray} … ＼end{eqnarray}命令,但eqnarray命令是使若干方程按 ...

  8. Android4.4系统源码百度网盘下载

    众所周知.Android如今非常火,肯定也有非常多android开发人员像我一样想研究android系统的源码.可是假设依照Google官方站点http://source.android.com/so ...

  9. [转]黄聪：如何使用CodeSmith批量生成代码

    本文转自:http://www.cnblogs.com/huangcong/archive/2010/06/14/1758201.html 在上一篇我们已经用PowerDesigner创建好了需要的测 ...

  10. iOS: 复选框使用---第三方框架SSCheckBoxView-master

    在iOS开发中对应用程序进行设置时一般都用UISwitch,偶尔显得单调,这时候你可以选择使用第三方开源类库SSCheckBoxView . SSCheckBoxView是一个可用在iOS上一个复选框 ...