<!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. Problem J: 零起点学算法89——程序设计竞赛

    #include<stdio.h> //选择排序法 int main(){ ]; while(scanf("%d",&n)!=EOF){ ;i<n;i++ ...

  2. Vue 小项目的最佳实践

    项目简介 目前一期只是为App内某个模块资讯模块文章的分享和APP下载,后续还会有更多的功能,为了项目可扩展.可伸缩结合了我以前的实践搭建了此项目项目地址,如果这个简单的项目能给您带来帮助请给小哥哥⭐ ...

  3. 移动端调试神器（eruda）

    在日常的移动端开发时,一般都是试用chrome浏览器的移动端模式进行开发和调试,只有在chrome调试完成,没有问题了才会上到真机测试,移动端开发的一大问题就在于此, 各种品牌各种型号手机,手机中各种 ...

  4. 【转】Geary's C

    李旭,Matlab: Geary's C 原文地址 Introduction Geary's C is a measure of spatial autocorrelation or an attem ...

  5. JIRA Service Desk 3.9.2 没有许可证

    https://my.atlassian.com/license/evaluation Server ID BFHT-0XFL-3NM8-3KRF SEN SEN-L10880225 License ...

  6. Laravel技⃣术⃣特⃣点⃣

    1.Bundle是Laravel的扩展包组织形式或称呼.Laravel的扩展包仓库已经相当成熟了,可以很容易的帮你把扩展包(bundle)安装到你的应用中.你可以选择下载一个扩展包(bundle)然后 ...

  7. vmware 下 ubuntu 不能全屏显示 的解决方法

    vmware 下 ubuntu 不能全屏显示 在 vmware 下 安装 ubuntu后,默认分辨率是 800 * 600,可以设置以全屏显示: 设置步骤: vmware 下启动 虚拟机,即 启动 u ...

  8. iOS:UITableViewCell使用详解

    转载自:http://my.oschina.net/u/2340880/blog/410421

  9. 爬虫之多线程 多进程 自定义异步IO框架

    什么是进程? 进程是程序运行的实例,是系统进行资源分配和调度的一个独立单位,它包括独立的地址空间,资源以及1个或多个线程. 什么是线程? 线程可以看成是轻量级的进程,是CPU调度和分派的基本单位. 进 ...

  10. 一步一步学RenderMonkey(3)——改良Phong光照模型 【转】

    转载请注明出处: http://blog.csdn.net/tianhai110 改良后的Phong光照模型: 上一节实现的phong镜面光照模型,如果固定光源,移动视点(及matView 关联为ma ...