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 <源路径> .. ...
随机推荐
- NSSearchPathForDirectoriesInDomains函数详解
NSSearchPathForDirectoriesInDomains函数详解 #import "NSString+FilePath.h" @implementation ...
- Java 解决约瑟夫问题
约瑟夫问题(有时也称为约瑟夫斯置换,是一个出现在计算机科学和数学中的问题.在计算机编程的算法中,类似问题又称为约瑟夫环.又称“丢手绢问题”.) 有这样一个故事,15个教徒和15个非教徒在深海遇险必须讲 ...
- file xxx from install of xxx conflicts with file from xxx
执行安装 rpm -ivh lib64stdc++6-4.6.1-2-mdv2011.0.x86_64.rpm 时提示以下错误: warning: lib64stdc++6-4.6.1-2-mdv20 ...
- required - HTML5里的input标签的required属性提示文字修改
input 里面增加这样的语句: <input type="text" placeholder="您的姓名" required oninvalid=&qu ...
- WindowsForm多窗体、多窗体传值、控件数据绑定--2016年12月8日
多窗体 Show Form1 f1 = new Form1(); f1.Show(); ShowDialog--在父窗体之上 Form1 f1 = new Form1(); f1.ShowDialog ...
- WPF中弹出菜单
在WPF里弹出菜单是用Popup,你那个右键的是上下文菜单(也就是快捷菜单). <Grid> <Button x:Name="BtnPop" Width=&quo ...
- linux终端实现代理
ubuntu 14.04安装Shadowsocks-Qt5 sudo add-apt-repository ppa:hzwhuang/ss-qt5 sudo apt-get update sudo a ...
- Mac OS X 上安装 ASP.NET 5
在Mac OS X Yosemite 10.10.3 中搭建第一个 ASP.NET 5 Web 项目 终于有时间在 Mac 上安装一下 ASP.NET 5,网上有许多教程,但是多数的时间比较早了,版本 ...
- iOS 系统数字键盘左下角加确定按钮
首先在 viewWillAppear 方法中注册监听相应的键盘通知,并且要在 viewWillDisappear 方法中注销通知- (void)viewWillAppear:(BOOL)animate ...
- 【转】Windows下使用libsvm中的grid.py和easy.py进行参数调优
libsvm中有进行参数调优的工具grid.py和easy.py可以使用,这些工具可以帮助我们选择更好的参数,减少自己参数选优带来的烦扰. 所需工具:libsvm.gnuplot 本机环境:Windo ...