一、自定义指令:

　　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. docfx daylybuild
			
    参考:https://myget.org/gallery/docfx-dev 根据对应的vs或nuget版本中添加地址. PS:daylybuild可能包含很多错误哦.
    
			
    2. 
						
  2. JavaScript的理解记录（5）
			
    ---接上篇: 三.DOM解析: 1.Document Object Model(DOM):是表示和操作HTML和XML文档内容的基础API;其中几个重要的类有:Document和Element,Te ...
    
			
    3. 
						
  3. Jquery揭秘系列：ajax原生js实现
			
    讲到ajax这个东西,我们要知道两个对象XMLHTTPRequest和ActiveXObject ,提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求 ...
    
			
    4. 
						
  4. SignalR主动通知订阅者示例
			
    html代码: <script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script> <scri ...
    
			
    5. 
						
  5. HCTF时PHP WAF然有RLFI漏洞
			
    tips:from菜鸡队长 这次去打HCTF决赛,用了这个自己写的WAF,web基本上没被打,被打的漏洞是文件包含漏洞,这个功能在本人这个waf里确实很是捉急,由于只是简单检测了..和php[35]{ ...
    
			
    6. 
						
  6. base64和图片的转换
			
    /// <summary> /// base64转图片 /// </summary> /// <param name="strBase64">& ...
    
			
    7. 
						
  7. mysql安装和配置
			
    一.下载mysql mysql下载页 我用的是5.6,点击旁边的"Looking for previous GA versions?"按钮就能看到5.6版本 mysql-5.6.3 ...
    
			
    8. 
						
  8. ARM处理器解析
			
    按图分析: ARM处理器有七种工作模式,为的是形成不同的使用级别,以防造成对系统的破坏.不同模式可以访问的寄存器不同,可以运行的指令不同. (1)user(10000):普通应用程序运行的模式(应用程 ...
    
			
    9. 
						
  9. 如何用java自带的工具生成证书
			
    一.keytool的概念 keytool 是个密钥和证书管理工具.它使用户能够管理自己的公钥/私钥对及相关证书,用于(通过数字签名)自我认证(用户向别的用户/服务认证自己)或数据完整性以及认证服务.在 ...
    
			
    10. 
						
  10. Android之仿微信Tab滑动
			
    这个项目实现了以下的功能:有三个标签聊天.发现和通讯录,左右滑动下面的ViewPager可以切换不同的标签,且标签下面的蓝色条可以随着手指的滑动来实时滑动.另外,如果第二次滑动到“聊天”界面,可以在“ ...
    
			
    11.