一、自定义指令:

　　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. java collection.sort()根据时间排序list
			
    首先:定义bean 然后:定义比较器 最后:测试使用 一.userBean package com.butterfly.Class; public class user { private Strin ...
    
			
    2. 
						
  2. 使用属性动画 — Property Animation
			
    属性动画,就是通过控制对象中的属性值产生的动画.属性动画是目前最高级的2D动画系统. 在API Level 11中添加.Property Animation号称能控制一切对象的动画,包括可见的和不可见 ...
    
			
    3. 
						
  3. ECharts学习（1）--简单图表的绘制
			
    1.获取ECharts 官网 下载:http://echarts.baidu.com/download.html 2.在html页面中引入ECharts文件 <!DOCTYPE html> ...
    
			
    4. 
						
  4. redis-windows免安装版本安装多个redies
			
    1.复制两份redis:端口分别为6369和6379 2.修改端口 6379为redis默认的端,不改; 进入6369的下面找到如下配置文件: redis.conf 修改端口 然后分别启动redis- ...
    
			
    5. 
						
  5. jquery 实现类似于弹幕效果
			
    在别人网站中看到一个类似于弹幕的效果,闲来无事用jquery写了个备用~~ <!DOCTYPE html> <meta charset="utf-8"> & ...
    
			
    6. 
						
  6. SQL Injection bypass WAF
			
    tips: 利用的注射点: 支持Union 可报错 支持多行执行.可执行系统命令.可HTTP Request等额外有利条件 若非以上类型,则可能需要暴力猜解.猜解时,可能会遇到一些限制.攻击者要做的, ...
    
			
    7. 
						
  7. MongoDB高可用复制集分片集群搭建
			
    1     逻辑架构 1.1     逻辑架构图 1.2     组件说明 一.mongos(query routers):查询路由,负责client的连接,并把任务分给shards,然后收集结果.一 ...
    
			
    8. 
						
  8. javascript判断手机浏览器版本信息
			
    <script type="text/javascript"> /* * 智能机浏览器版本信息: * */ var browser={ versions:functio ...
    
			
    9. 
						
  9. C#环境
			
    
			
    10. 
						
  10. tnt_esri.dat  Arcgis8.1安装license
			
    arcgis8.1授权文件内容,复制个txt重命名为tnt_esri.dat即可.注意替换yourcomputername为你的计算机名   SERVER yourcomputername ESRI_ ...
    
			
    11.