angularjs中的directive
正在初学angularjs中,在网上看到一篇详细讲解directive指令的文章,于是就记录在这里和大家一起分享
angular.module('docsTransclusionExample', [])
.controller('Controller', ['$scope', function($scope) {
$scope.name = 'Tobias';
}])
.directive('myDialog', function() {
return {
restrict: 'E',
transclude: true,
scope: {},
templateUrl: 'my-dialog.html',
link: function (scope, element) {
scope.name = 'Jeff';
}
};
});
1.restrict
E: 表示该directive
仅能以element方式使用,即:<my-dialog></my-dialog>
A: 表示该directive
仅能以attribute方式使用,即:<div my-dialog></div>
EA: 表示该directive
既能以element方式使用,也能以attribute方式使用
2.transclude
directive
可能接受页面上的其他html内容时才会用到,建议先去掉该参数。有些高阶了。
3.scope
当你写上该属性时,就表示这个directive
不会从它的controller
里继承$scope
对象,而是会重新创建一个
4.templateUrl
你的directive
里的html
内容
5.link
可以简单理解为,当directive
被angular 编译后,执行该方法.link
中的第一个参数scope
基本上就是上面写的那个scope
6.element
简单说就是$('my-dialog')
attrs
是个map,内容是你这个directive
上的所有属性,例如:你在页面上如果这样写了directive
:
<my-dialog type="modal" animation="fade"></my-dialog>
那attrs
就是:
{
type: 'modal',
animation: 'fade'
}
angularjs中的directive的更多相关文章
- angularjs中的directive scope配置
angularjs中的directive scope配置 定义directive其中重要的一环就是定义scope,scope有三种形式: 默认的scope,DOM元素上原有的scope scope: ...
- AngularJS中有关Directive的汇总
本篇通过几个例子对AngularJS中的Directive进行汇总. 例子1,单向绑定和双向绑定 <html ng-app="myApp"> <head> ...
- angularJs中自定义directive的数据交互
首先放官方文档地址:https://docs.angularjs.org/guide/directive 就我对directive的粗浅理解,它一般用于独立Dom元素的封装,应用场合为控件重用和逻辑模 ...
- AngularJS中使用Directive、Controller、Service
AngularJS是一款非常强大的前端MVC框架.同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉. (1)Directive 指令 (2)Controller 控制器 (3)Service ...
- angularjs中directive指令与component组件有什么区别?
壹 ❀ 引 我在前面花了两篇博客分别系统化介绍了angularjs中的directive指令与component组件,当然directive也能实现组件这点毋庸置疑.在了解完两者后,即便我们知道co ...
- angularJS中directive与controller之间的通信
当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的 ...
- AngularJs中,如何在父元素中调用子元素为自定义Directive中定义的函数?
最近一段时间准备使用AngularJs中的自定义Directive重构一下代码. 在这里说明一下,把自定义控件封装成Directive并不一定是要复用,而是要让代码结构更加清晰.就好像你将一个长方法拆 ...
- AngularJS中自定义有关一个表格的Directive
本篇体验在AngularJS中自定义一个有关表格的Directive.表格的需求包括: ● 表格结构 <table> <thead> <tr> ...
- angularJS中directive父子组件的数据交互
angularJS中directive父子组件的数据交互 1. 使用共享 scope 的时候,可以直接从父 scope 中共享属性.使用隔离 scope 的时候,无法从父 scope 中共享属性.在 ...
随机推荐
- 【原创】PostSharp入门笔记
最近写了一个抓取软件,用户反映软件偶尔会抛异常: 由于当时写代码时没有注意异常处理,大部分方法都没有写try…catch…finally的语句,所以很难找出异常是出在哪个地方,难道要为所有方法加上tr ...
- System.Data.SqlClient.SqlError: 备份集中的数据库备份与现有的 'XXX' 数据库不同
System.Data.SqlClient.SqlError: 备份集中的数据库备份与现有的 'XXX' 数据库不同. 1. 删除与要恢复数据库同名的已经存在的数据库:2. 右击“数据库”选择“还原数 ...
- 调研js模板引擎
js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...
- [Angular2 Form] Display Validation and Error Messaging in Angular 2
Angular 2’s ngModel provides error objects for each of the built-in input validators. You can access ...
- 基于CSS3制作的鼠标悬停动画菜单
之前分享了好多款css3实现的鼠标悬停效果.今天再给大家带来一款基于CSS3制作的鼠标悬停动画菜单.这款菜单适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界 ...
- shell 笔记
shell 笔记 通配符 没有 '.' [Aa] 表示 A 或者 a ? 表示任意字符 * 表示任意字符串 IFS data='name, sex, rollno, location' oldIFS= ...
- 编写who命令:文件操作,缓冲区与联机帮助
最近阅读UULP(Understanding Unix/Linux Programming),按照书中介绍对Unix/Linux系统编程进行学习梳理,总结如下. 1. who命令能做什么 who命令用 ...
- 关于mysql下hibernate实体类字段与数据库关键字冲突的问题
好久没写了,都忘记博客了,趁着现在还在公司,写的东西是经过验证的,不是在家凭记忆力写的,正确率有保障,就说说最近遇到的一件事情吧. 以前一直用的oracle数据库,这次项目我负责的模块所在的系统是用的 ...
- SpringMvc多文件上传简单实现
public ResponseItem uploadFile(MultipartHttpServletRequest request,FileItem fileItem,PageData pd) { ...
- 40个GitHub上最受欢迎的iOS开源项目
40个GitHub上最受欢迎的iOS开源项目(一) http://www.weste.net/2013/8-1/92975.html 40个GitHub上最受欢迎的iOS开源项目(二) http:// ...