Anaular指令详解
目录：directive() restrict replace template templateUrl scope transclude ng-transclude controller
directive()
自定义指令，第一个参数是自定义指令的名字，第二个参数是一个函数，这个函数的返回值就是自定义指令该干的事情。
//自定义指令指定控制器的名字
.directive("myDirective",function(){
return{ }
})
restrict
指定调用自定义指令的方式：A属性/E标签/C类/M注释。推荐用属性的形式调用自定义指令。
.directive("myDirective",function(){
return{
//指定此指令用属性调用
restrict:'A'
}
})
replace
规定自定义指令模板是被包含在指令元素里面还是替换自定义指令，true表示模板替换视图中的自定义指令。false是默认值，表示模板被嵌套在自定义指令中。
.directive("myDirective",function(){
return{
//规定调用指令的方式
restrict:'A',
//模板替换自定义指令
replace:true,
//定义模板
template:'<a href="http://www.baidu.com">点我跳到百度<span>{{my}}</span></a>'
}
})
template
定义模板，值是一个html元素的字符串。参考replace代码
templateUrl
同template相似，值是一个引入外部模板的路径，不能跨域。
.directive("myDirective",function(){
return{
//规定调用指令的方式
restrict:'A',
//模板替换视图中的指令
replace:true,
//定义模板路径
templateUrl:'../tem.html'
}
})
scope
创建隔离作用域，值为true时会继承父级作用域，创建一个新的作用域，值设置为一个对象时，不会继承父级作用域。使用@符号指定与视图中的数据的绑定。
transclude ng-transclude
值为true时表示将页面自定义指令中的子元素添加到模板里带有 ng-transclude 属性的元素的下面
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../../Angular/angular.min.js"></script>
</head>
<body>
<div sidebox title="Links">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
<div ng-controller="myController">
<div sidebox title="ttt">
<a href="">{{data}}</a>
<a href="">ddddd</a>
<a href="">dddd</a>
<a href="">dddd</a>
<a href="">ddddd</a>
</div>
</div> <script>
angular.module("myApp",[])
.controller("myController",function($scope){
$scope.data = "大厨的笔记"
})
.directive("sidebox",function(){
return{
restrict:"EA",
scope:{
title:'@'
},
transclude:true,
template:'<div class="sidebox">' +
' <div>' +
' <h2>{{title}}</h2>' +
' <span ng-transclude>' +//把自定义指令里的代码放到带有ng-transclude指令的地方
' </span>' +
' </div>' +
'</div>'
}
})
</script>
</body>
</html>
controller
值是一个字符串表示在指定自定义指令的控制器字符串就是对应的控制器的名字，值还可以是一个函数，表示当前指令的一个匿名控制器。
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../../Angular/angular.min.js"></script>
</head>
<body>
<div my-directive title="123333"> </div> <div chef-controller> </div>
<script>
angular.module("myApp",[])
//控制器
.controller("myController",function($scope){
$scope.data = "自定义指令的指定控制器"
}) //自定义指令指定控制器的名字
.directive("myDirective",function(){
return{
restrict:'A',
scope:{}, //指定自定义指令的控制器名字
controller:'myController',
template:'<a>{{title}}</a><span>{{data}}</span>'
}
}) //指定自定义指令的匿名控制器
.directive("chefController",function(){
return{
restrict:"A",
scope:{
title:'@'
},
template:'<a>{{title}}</a>', //指令内部的匿名控制器
controller:function($scope){
$scope.title = "内部定义匿名控制器";
}
}
})
</script>
</body>
</html>
Anaular指令详解的更多相关文章
- [转]JVM指令详解（上）
作者:禅楼望月(http://www.cnblogs.com/yaoyinglong) 本文主要记录一些JVM指令,便于记忆与查阅. 一.未归类系列A 此系列暂未归类. 指令码 助记符 ...
- C#中的预处理器指令详解
这篇文章主要介绍了C#中的预处理器指令详解,本文讲解了#define 和 #undef.#if.#elif.#else和#endif.#warning和#error.#region和#endregio ...
- rsync指令详解
rsync指令详解(更详细的看官方文档http://rsync.samba.org/ftp/rsync/rsync.html) [root@Centos epel]# rsync --help rsy ...
- #pragma 预处理指令详解
源地址:http://blog.csdn.net/jx_kingwei/article/details/367312 #pragma 预处理指令详解 在所有的预处理指令中, ...
- 迈向angularjs2系列(2):angular2指令详解
一:angular2 helloworld! 为了简单快速的运行一个ng2的app,那么通过script引入预先编译好的angular2版本和页面的基本框架. index.html: <!DOC ...
- LDM与STM指令详解
title: LDM与STM指令详解 date: 2019/2/26 17:58:00 toc: true --- LDM与STM指令详解 指令形式如下,这里的存储方向是针对寄存器的 Load Mul ...
- C#中的预处理指令详解
这篇文章主要介绍了C#中的预处理指令详解,本文讲解了#define 和 #undef.#if.#elif.#else和#endif.#warning和#error.#region和#endregion ...
- pragma comment的使用 pragma预处理指令详解
pragma comment的使用 pragma预处理指令详解 #pragma comment( comment-type [,"commentstring"] ) 该宏放置一 ...
- Docker技术入门与实战 第二版-学习笔记-3-Dockerfile 指令详解
前面已经讲解了FROM.RUN指令,还提及了COPY.ADD,接下来学习其他的指令 5.Dockerfile 指令详解 1> COPY 复制文件 格式: COPY <源路径> .. ...
随机推荐
- Linux 平台GCC使用小结
gcc -Wall [-I search_headfile_path] [-L search_lib_path] sourcefile -lNAME -o exe-name -Wall选项打开所有最常 ...
- libvirt 网络手册（一）
如果选择网络类型 在一个专用的服务器上,虚拟机常常需要被从公网访问(也就是每个虚拟机都需要公网地址),这时就需要桥接网络,它使得每个虚拟机有自己的IPV4和IPV6地址.如果桥接不可用,可以创建一个R ...
- java 单例模式
懒汉式 public class Singleton{ //@单例类只能有一个实例 //@单例类必须自行创建这个实例 //@单例类必须给所有对象提供这一个实例//必须向整个系统提供这个这个实例 pri ...
- canvas简介
一.canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 <canvas></canvas> 英 ['kænvəs] 美 ['kænvəs] 帆 ...
- Hadoop学习记录
http://blog.csdn.net/m_star_jy_sy/article/details/26476907配置windows里eclipse连接hadoop集群 hadoop常见命令 启动H ...
- Activity系列讲解---数据传递
在Android中,不同的Activity实例可能运行在一个进程中,也可能运行在不同的进程中.因此需要一种特别的机制帮助我们在Activity之间传递消息.Android中通过Intent对象来表示一 ...
- 设置redis主从出现的问题
314:S 05 Jan 15:12:17.433 # WARNING: The TCP backlog setting of 511 cannot be enforced because /proc ...
- ORA-00257:archiver error解决办法
出现ORA-00257错误(空间不足错误),通过查找资料,绝大部分说这是由于归档日志太多,占用了全部的硬盘剩余空间导致的,通过简单删除日志或加大存储空间就能够解决. (一).oralce 11g更改归 ...
- Python3实现火车票查询工具
Python 实现火车票查询工具 一. 实验介绍 通过python3实现一个简单的命令行版本的火车票查询工具,用实际中的例子会更感兴趣,不管怎么样,既练习了又可以自己使用. 1. 知识点: Pyth ...
- 【NodeJs环境下bower】如何更改bower_components文件夹的位置
bower在初始化,默认是将bower_components文件夹放到项目的根目录下,若是public/index.html如何配置bower_components下的js或者css类库呢?只需要将b ...