<!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. lib_chan库学习

    -module(lib_chan_cs). %% 实现服务器端结构和机制的模块 -export([start_raw_server/4, start_raw_client/3]). -export([ ...

  2. Phpstorm-svn配置

    参考网站; http://blog.csdn.net/Knight_quan/article/details/51889476 1 打开PhpStorm,找到工具  VCS—>Checkout ...

  3. sql server的sql 语句中的列名包含[]时候，把]替换成]]就可以

    sql server的sql 语句中的列名包含[]时候,把]替换成]]就可以eg: create table p.e_LOG_WebServer ( [BSCFlg] int, ), ) ); sel ...

  4. how to solve "[WARNING] File encoding has not been set, using platform encoding Cp1252, i.e. build is platform dependent!"

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  5. python笔记12-python多线程之事件（Event)

    前言 小伙伴a,b,c围着吃火锅,当菜上齐了,请客的主人说:开吃!,于是小伙伴一起动筷子,这种场景如何实现 Event(事件) Event(事件):事件处理的机制:全局定义了一个内置标志Flag,如果 ...

  6. ELK集群模式部署

    架构拓扑图为: 准备工作: 下载资源包: Elasticsearch: wget https://artifacts.elastic.co/downloads/elasticsearch/elasti ...

  7. javascript 中contentWindow和 frames和iframe之间通信

    iframe父子兄弟之间通过jquery传值(contentWindow && parent),iframe的调用包括以下几个方面:(调用包含html dom,js全局变量,js方法) ...

  8. 客户端的javascript改变了asp.net webform页面控件的值，后台代码中如何获取修改后的值。

    客户端的javascript改变了asp.net webform页面控件的值,后台代码中如何获取修改后的值.     无论是什么的html控件,只要加上了runat="server" ...

  9. ylbtech-LanguageSamples-Versioning(版本控制)

    ylbtech-Microsoft-CSharpSamples:ylbtech-LanguageSamples-Versioning(版本控制) 1.A,示例(Sample) 返回顶部 “版本控制”示 ...

  10. centOS6.5 Hadoop1.0.4安装

    前段时间去培训,按照教程装了一遍Hadoop.回来又重新装一次,捋下思路,加深理解. 基本配置如下,三个节点,一个namenode,两个datanode. Namenode 192.168.59.14 ...