一、自定义指令:

　　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. 【原创】相对完美的垂直居中popup(modal/dialog)，无需监听window.resize事件
			
    <table class="popup" style="position: absolute; background-color: black; border-ra ...
    
			
    2. 
						
  2. linux基础知识与技能2
			
    3.编辑器vi的使用(vi和vim的联系)什么是编辑器?编辑器就是一款软件,它的主要作用就是用来编辑.譬如编写文件,编写代码.Windows中的常用编辑器,如自带的notepad.比较好用的notep ...
    
			
    3. 
						
  3. C#多线程同步事件及等待句柄AutoResetEvent 和 ManualResetEvent
			
    最近捣鼓了一下多线程的同步问题,发现其实C#关于多线程同步事件处理还是很灵活,这里主要写一下,自己测试的一些代码,涉及到了AutoResetEvent 和 ManualResetEvent,当然还有也 ...
    
			
    4. 
						
  4. mysql-data-dumper
			
    mysql-data-dumper mysql-data-dumper最近几天写的项目. 一开始仅仅想实现一个简单的数据导出工具,方便大家使用,提升团队成员的效率.后来结果想法天马行空,所以进度有点慢 ...
    
			
    5. 
						
  5. <<< Tomcat 部署项目There are no resources that can be added or removed from the server
			
    错误信息:没有资源可以添加或删除的服务器 解决方式: 方式1.选中项目右键——找到Project Facets——勾选Dynamic Web Project和java 方式2.新建一个同名web项目, ...
    
			
    6. 
						
  6. onscroll事件，onresize事件
			
    js获取页面元素高度.宽度 网页可见区域宽: document.body.clientWidth;  网页可见区域高: document.body.clientHeight;  网页可见区域宽: do ...
    
			
    7. 
						
  7. centos  ab命令安装
			
    yum install apr-util -ymkdir abcd abyum -y install yum-utils -yyumdownloader httpd yum localinstall  ...
    
			
    8. 
						
  8. 大熊君学习html5系列之------WebStorage（客户端轻量级存储方案）
			
    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
    
			
    9. 
						
  9. Java Web 学习链接
			
    解决JSP中文乱码问题:http://www.cnblogs.com/chengkai/articles/2171848.html 编程思想之多线程与多进程:http://blog.csdn.net/ ...
    
			
    10. 
						
  10. [Network] 计算机网络基础知识总结
			
    计算机网络学习的核心内容就是网络协议的学习.网络协议是为计算机网络中进行数据交换而建立的规则.标准或者说是约定的集合.因为不同用户的数据终端可能采取的字符集是不同的,两者需要进行通信,必须要在一定的标 ...
    
			
    11.