<!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. 【搜索】【约数个数定理】[HAOI2007]反素数ant

    对于任何正整数x,其约数的个数记作g(x).例如g(1)=1.g(6)=4.如果某个正整数x满足:g(x)>g(i) 0<i<x,则称x为反质数. 所以,n以内的反质数即为不超过n的 ...

  2. 【manacher】HDU3068-最长回文

    [题目大意] 给出一个只由小写英文字符a,b,c...y,z组成的字符串S,求S中最长回文串的长度. [manacher知识点] ①mx - i > P[j] 的时候,以S[j]为中心的回文子串 ...

  3. 【SPFA】POJ3259-Wormhole

    普通的SPFA的负环判定.犯了三个错误,全部写在注释里了. #include<iostream> #include<cstdio> #include<cstring> ...

  4. 自定义loading dialog --- 后背景透明

    自定义loading dialog --- 后背景透明    <style name="loading_dialog" parent="android:style/ ...

  5. （原创）Stanford Machine Learning (by Andrew NG) --- (week 9) Anomaly Detection&Recommender Systems

    这部分内容来源于Andrew NG老师讲解的 machine learning课程,包括异常检测算法以及推荐系统设计.异常检测是一个非监督学习算法,用于发现系统中的异常数据.推荐系统在生活中也是随处可 ...

  6. 关于智能硬件设备shell安全设计

    问题描述: 在对某些智能硬件设备进行测试时,发现有些设备直接提供了Linux shell,并且登录账号默认是root权限!在登录到设备后,在bin目录下可以看到很多命令行程序,这些程序大部门用户用不到 ...

  7. go排序后索引

    最近碰上了一个需求,要得到排序后的原索引序列. 我又不希望自己重新实现一快排出来,所以在接口上重新封装了一下. package main import ( "fmt" " ...

  8. JDK文件夹结构及文件解释

    bin:一些命令行工具,包括Java编译器的启动命令. lib:开发工具使用的文件,一些类库 jre:java程序运行环境所需文件

  9. linq直接执行sql语句

    1.ExecuteQuery方法 看命名,我们很容易联想到ado.net里熟悉的Command的ExecuteNonQuery方法,但是VS的智能提示告诉我们这个方法返回的是一个泛型集合,应该&quo ...

  10. R简易安装

    post={"title":"my Blog post","content":"Here's my blog post" ...