一、自定义指令:

　　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-json日期字符串转换
			
    String valueStr = value.toString(); if(StringUtils.isBlank(valueStr) || "null".equals(valu ...
    
			
    2. 
						
  2. Jstat PID not found
			
    解决步骤 删除/tmp/hsperfdata_{USER}文件夹,如果是root用户登录,即为/tmp/hsperfdata_root 通过chown.chmod命令保证执行jstat用户必定拥有对/ ...
    
			
    3. 
						
  3. 迅雷9、迅雷极速版之迅雷P2P加速：流量吸血鬼？为什么你装了迅雷之后电脑会感觉很卡很卡？
			
    原文地址:http://www.whosmall.com/post/90 关闭极速版迅雷ThunderPlatform.exe进程 ThunderPlatform.exe目的:利用P2P技术进行用户间 ...
    
			
    4. 
						
  4. 《Python核心编程》18.多线程编程（二）
			
    18.1没有线程支持 #!/usr/bin/env python # -*- coding:utf-8 -*- from time import sleep, ctime def loop0(): p ...
    
			
    5. 
						
  5. Java的生日
			
    你知道巴西的税务系统,亚马逊的Kindle阅读器以及韩国的第一大镁板制造厂有什么共同点吗?乍一看上去,这简直就是风马牛不相及,但是这些系统同世界上其它100亿个设备共享一个元素,那就是Java. 19 ...
    
			
    6. 
						
  6. Loadrunner安装
			
    安装参考网址:http://www.cnblogs.com/yangxia-test/archive/2012/10/30/2746621.html 本人验证过的,不自己写了 另附Loadrunner ...
    
			
    7. 
						
  7. CentOS 7 上安装 redis3.2.3安装与配置
			
    前一段时间写过一篇codis集群的文章,写那篇文章主要是因为当时的项目不支持redis自身集群的功能. 而现在最新的项目是需要redis集群的,这篇文章我们就来介绍下有关redis的安装与配置. 一. ...
    
			
    8. 
						
  8. D：Wordpress_AFC插件常用代码
			
    获取自定义变量 //输出自定义字段title的值<?php the_field('title','options'); ?> //获取自定义字段title的值 <?php echo  ...
    
			
    9. 
						
  9. ActiveMQ支持的传输协议
			
    ------------------------------------------------------ ActiveMQ支持的client-broker通讯协议有:TCP.NIO.UDP.SSL ...
    
			
    10. 
						
  10. Docker容器操作中常用命令集合
			
    docker pull 从仓库获取所需要的镜像 docker images 显示本地已有的镜像. docker commit 提交更新后的副本. docker build 创建一个新的镜像 ADD 复 ...
    
			
    11.