一、自定义指令:

　　1. 先创建模块    var app=angular.module("myApp",[]);

　　2. 创建自定义指令 (directive后面的参数一:自定义指令的名称,参数二:function 返回值是一个对象 template是模板)

　　app.directive("shen",function(){
    　　return {
        　　template:"<h1>这是自定义属性</h1>"
    　　}
　　})
　　3.划定模块范围,使用自定义指令
　　<body ng-app="myApp">
　　<shen></shen>

二、模板--引入外部文件

上面是模板最基本的使用方式，模板还可以引用外部文件，当模板的内容稍大一点的时候，引用外部文件更好
定义一个模板文件，最好是把作为模板的文件统一放在template文件夹下。模板文件不需要html、body等标签，直接写你需要的模板标签即可

　　此时自定义指令中的template换成templateUrl，后面写模板文件的相对路径，其他不变

三、在script标签中写模板

　　新建一个script标签，这个标签必须有id，和type，id随便取名字，type为固定写法  type="text/ng-template"。

　　在这个script标签中写模板，写法和一般标签写法一样。

　　此时自定义指令中templateUrl对应的值为 script标签的id名

四、自定义指令的不同实现方式

　　以上方法中自定义指令都是以标签的形式实现的，其实自定义指令还可以用属性和类名的形式实现

　　

　　当以类名形式编写时，还必须在定义指令时添加restrict属性  （使用属性和标签的方式时不写也可正常显示）

　　restrict是“限制”的意思，属性值可以为E（element），A（attribute），C（class），当你希望实现方式只能是标签时，可以写restrict：“E”，restrict：“EAC”表示三种方式都可以，以此类推。

　　

五、自定义模板内容

　　上面的模板内容都是固定的，实际开发中模板的内容都是由项目需要而生成的，如何让每一个模板的内容不一样呢？ 使用   transclude

　　1. 在模板中的标签里添加 ng-transclude,（如果你需要某个标签里的内容自定义就添加ng-transclude属性，如果希望是固定的值就不需要加）

　　2. 添加属性 transclude：true

　　2. 在实现自定义指令时，把自定义的内容写在指令标签的里面即可

        

　　

　　



　　
												


											
AngularJS--自定义指令和模板的更多相关文章
	

    
						
  1. 浅析AngularJS自定义指令之嵌入(transclude)
		
    AngularJS自定义指令的嵌入功能与vue的插槽十分类似,都可以实现一些自定义内容展现.在开始之前先简单介绍下自定义指令的transclude属性和AngularJS的内置指令ng-transcl ...
    
		
    2. 
						
  2. AngularJs自定义指令详解（1） - restrict
		
    下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...
    
		
    3. 
						
  3. AngularJS: 自定义指令与控制器数据交互
		
    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
    
		
    4. 
						
  4. angularjs自定义指令Directive
		
    今天学习angularjs自定义指令Directive.Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Adm ...
    
		
    5. 
						
  5. angularJs 自定义指令传值---父级与子级之间的通信
		
    angularJs自定义指令用法我忽略,之前有写过,这里只说一下父子级之间如何传值: 例如: 模块我定义为myApp,index.html定义 <my-html bol-val="bo ...
    
		
    6. 
						
  6. angularJS自定义指令模板替换
		
    <html> <head> <meta charset="utf-8"/> <title></title> </h ...
    
		
    7. 
						
  7. angularJS 使用自定义指令输出模板
		
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...
    
		
    8. 
						
  8. angularJS——自定义指令
		
    主要介绍指令定义的选项配置 //angular指令的定义,myDirective ,使用驼峰命名法 angular.module('myApp', []) .directive('myDirectiv ...
    
		
    9. 
						
  9. 利用angularJs自定义指令（directive）实现在页面某一部分内滑块随着滚动条上下滑动
		
    最近老大让我一个效果实现在页面某一部分内滑块随着滚动条上下滑动,说明一下我们项目使用技术angularJs.大家都知道,使用jquery很好实现. 那么angular如何实现呢,我用的是自定义指令(d ...
    
		
    10. 
						
  10. AngularJS自定义指令directive：scope属性 （转载）
		
    原文地址:http://blog.csdn.net/VitaLemon__/article/details/52213103 一.介绍: 在AngularJS中,除了内置指令如ng-click等,我们 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. select,poll,epoll比较
			
    除常用文件i/o外,其他常用io模型:io多路复用(select和poll系统调用)信号驱动I/Olinux专有的epoll编程接口异步io(aio),linux在glibc中提供有基于线程的 pos ...
    
			
    2. 
						
  2. sublime编辑器插件
			
    sublime---插件 http://www.cnblogs.com/dudumao/p/4054086.html sublime--- Emmet插件  使用方法 http://docs.emme ...
    
			
    3. 
						
  3. Mysql 命令大全
			
    1.连接Mysql 格式: mysql -h主机地址 -u用户名 -p用户密码1.连接到本机上的MYSQL.首先打开DOS窗口,然后进入目录mysql\bin,再键入命令mysql -u root - ...
    
			
    4. 
						
  4. BZOJ3209 花神的数论题
			
    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...
    
			
    5. 
						
  5. 关于redis的keys命令的性能问题
			
    KEYS pattern 查找所有符合给定模式 pattern 的 key . KEYS * 匹配数据库中所有 key . KEYS h?llo 匹配 hello , hallo 和 hxllo 等. ...
    
			
    6. 
						
  6. 错误信息：内存位置访问无效。 (Exception from HRESULT: 0x800703E6)
			
    错误提示: 错误信息:内存位置访问无效. (Exception from HRESULT: 0x800703E6) 异常类型:System.BadImageFormatException 堆栈跟踪:  ...
    
			
    7. 
						
  7. JBoss 系列十四：JBoss7/WildFly如何加载外部的文件或properties文件
			
    http://www.tuicool.com/articles/M7ZR3y 原文 http://blog.csdn.net/kylinsoong/article/details/12623997 主 ...
    
			
    8. 
						
  8. 【整理】认识MSG结构体
			
    在Windows程序中,消息是由MSG结构体来表示的.MSG结构体的定义如下(参见MSDN): typedef struct tagMSG { HWND hwnd; UINT message; WPA ...
    
			
    9. 
						
  9. Linux--niaoge
			
    鸟哥的Linux私房菜 网络基础: 那 TCP/IP 是如何运作的呢?我们就拿妳常常连上的 Yahoo 入口网站来做个说明好了,整个联机的状态可以这样看: 应用程序阶段:妳打开浏览器,在浏览器上面输入 ...
    
			
    10. 
						
  10. 数据存储_SQLite常用的函数
			
    一.简单说明 1.打开数据库 int sqlite3_open( const char *filename,   // 数据库的文件路径 sqlite3 **ppDb            // 数据 ...
    
			
    11.