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 <源路径> .. ...
随机推荐
- Java上等价类划分测试的实现
利用JavaFx实现对有效等价类和无效等价类的划分: 代码: import javafx.application.Application;import javafx.event.ActionEvent ...
- 我的页面定制CSS代码（SimpleGamboge皮肤）
我的页面定制CSS代码,针对博客园SimpleGamboge皮肤. 调整: 1.左上图片更换为自己的头像 2.扩大左侧栏宽度,缩小右侧主栏宽度宽度 3.扩大内容页面的评论区宽度,工具图标靠左 4.去广 ...
- mysql 编译安装
mysql 编译安装方式: ```cd /home/oldboy/tools``` 创建 目录 if not have then mkd ...
- 转：入门Webpack，看这篇就够了
写在前面的话 阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过:如果你和十天前的我一样,对很多选项存在着疑惑,那花一段 ...
- 分布式的Id生成器
项目中需要一个分布式的Id生成器,twitter的Snowflake中这个既简单又高效,网上找的Java版本 package com.cqfc.id; import org.slf4j.Logger; ...
- Qt - QThread（翻译帮助文档）
QThread Class 详细描述 QThread 类提供一个平台无关的方法来管理线程. 一个QThread对象管理一个程序中的控制线程.QThread在run()中开始执行任务.默认地,run() ...
- python Unicode 编码解码
1 #将Unicode转换成普通的Python字符串:"编码(encode)" 2 unicodestring = u"Hello world" 3 utf8s ...
- Linux下的压缩和解压缩命令——tar
tar命令 选项: -c: 建立压缩档案 -x:解压 -t:查看内容 -r:向压缩归档文件末尾追加文件 -u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只 ...
- win10 设置声卡驱动 --- 解决喇叭没有声音！
win10 设置声卡驱动 --- 解决喇叭没有声音! 1)安装驱动,必须能够在:"控制面板\硬件和声音" 下找到安装好的: "Realtek高清晰音频管理器" ...
- selenium Remote Server 实现原理
selenium作为一个出色的web automation框架,被越来越多的企业采用究其原因,框架设计的比较remarkable, 作为一个开源的框架,能够开辟出一套协议,以至于针对app测试的app ...