<!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. 【数论】【欧拉函数】CDOJ1724 为了我们心爱的京电

    京州电子科技大学遭遇废校危机,为了保护我们心爱的学校,N位魔法少女站了出来,她们能做的就是……成为偶像! 每个魔法少女都拥有一定的人气,他们中的每个人的人气计算方式如下: 假设某个魔法少女的学号为a, ...

  2. LeetCode 771. 宝石与石头（java）

    给定字符串J 代表石头中宝石的类型,和字符串 S代表你拥有的石头. S 中每个字符代表了一种你拥有的石头的类型,你想知道你拥有的石头中有多少是宝石. J 中的字母不重复,J 和 S中的所有字符都是字母 ...

  3. Learning Spatial Regularization with Image-level Supervisions for Multi-label Image Classification

  4. Java如何进行异常处理

    关键字:throws.throw.try.catch.finally的用法 Java通过面向对象的方法进行异常处理,把各种不同的异常进行分类,并提供了良好的接口.在Java中,每个异常都是一个对象,它 ...

  5. 【MySQL笔记】字符串、时间日期转换

    1.新增一列,将字符串日期(年.月.日)转换为Date类型   报错:Error Code: 1175. You are using safe update:http://jingyan.baidu. ...

  6. Web安全测试指南--认证

    认证: 5.1.1.敏感数据传输: 编号 Web_Authen_01_01 用例名称 敏感数据传输保密性测试 用例描述 测试敏感数据是否通过加密通道进行传输以防止信息泄漏. 严重级别 高 前置条件 1 ...

  7. for of 与 for in的区别2

    遍历数组通常使用for循环,ES5的话也可以使用forEach,ES5具有遍历数组功能的还有map.filter.some.every.reduce.reduceRight等,只不过他们的返回结果不一 ...

  8. Android获取apk的版本及包名等信息

    import android.app.Activity; import android.content.Context; import android.content.pm.ApplicationIn ...

  9. 对oracle实例的内存（SGA和PGA）进行调整，优化数据库性

    一.名词解释 (1)SGA:SystemGlobal Area是OracleInstance的基本组成部分,在实例启动时分配;系统全局域SGA主要由三部分构成:共享池.数据缓冲区.日志缓冲区. (2) ...

  10. Unity3d通用工具类之生成文件的MD5

    今天我们来写写工具类,这个类有什么用呢? 也就是无论你做什么项目,这个工具类你都可以拿来用,之所以通用,是可以适用所有项目. 这节我主要讲如何生成文件的MD5码. 那么这个MD5是个什么鬼东西,读者可 ...