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.transcludedirective可能接受页面上的其他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 中共享属性.在 ...
随机推荐
- [Node.js] Broswerify -- 1
Browserify is a tool that brings node.js style development to the browser. The thing you can see on ...
- Autolayout环境设置任意个数相等间距排列的按钮的方法
摘要: 在storyboard中,想要用autolayout设置多个按钮按照相同的间距排列,并且自动根据屏幕宽度调整间距大小,就我了解的来说,没有直接的设置方法.我用storyboard+代码的方法实 ...
- redis的实现过程
1下载redis的安装包并按照操作安装 2开启 右击我的电脑→管理→服务→站到redis service服务 将其开启 注意:redis服务开启后其默认的ip和端口号为127.0.0.1:6379 3 ...
- 源码-hadoop1.1.0-core-org.apache.hadoop
按包的顺序类的顺序来吧,因为我不懂hadoop类的具体体系和类之间的联系,如果有一定知识积累的可以看下别人写的hadoop源码解读类的书,类似的有 http://pan.baidu.com/s/1i3 ...
- 基于C#实现的HOOK键盘钩子实例代码
本文所述为基于C#实现的HOOK实例,该实例可用来屏蔽系统热键.程序主要实现了安装钩子.传递钩子.卸载钩子等功能.在传递钩子中:<param name="pHookHandle&quo ...
- 使用PIL处理image
获得一个Image实例 import Image im = Image.open('1.jpg') #返回一个Image对象,open只对图片的头做处理,所以open操作是非常快的 resize,裁剪 ...
- (搬运)《算法导论》习题解答 Chapter 22.1-1(入度和出度)
(搬运)<算法导论>习题解答 Chapter 22.1-1(入度和出度) 思路:遍历邻接列表即可; 伪代码: for u 属于 Vertex for v属于 Adj[u] outdegre ...
- Genymotion——PC上也能玩部落冲突 Clash of Clans
零.前言 部落冲突(Clash of Clans)是手机上一个很不错的联机对战游戏,安卓和iOS平台上都有. 最近玩这个略上瘾,前几天看到部落里有人说用模拟器可以在电脑上玩,就想自己试试. 不想看我啰 ...
- Java 多线程-上课总结
Java 多线程 一.操作系统中线程和进程的概念 现在的操作系统是多任务操作系统.多线程是实现多任务的一种方式. 进程是指一个内存中运行的应用程序,每个进程都有自己独立的一块内存空间,一个进程中可以启 ...
- SPOJ 7758. Growing Strings AC自动机DP
Growing Strings 题目:给出n个字符串,问最多能够选出多少个串组成序列,并满足前一个字符串是后一个字符串的子串. 分析: AC自动机经典水题... 考虑每个节点结尾时,他能够选出最多的串 ...