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 中共享属性.在 ...
随机推荐
- GPS获取Location 获取所在地点的经纬度
利用手机获取所在地点的经纬度: Location 在Android 开发中还是经常用到的,比如 通过经纬度获取天气,根据Location 获取所在地区详细Address (比如Google Map 开 ...
- vs2012运行c语言出现:无法查找或打开 PDB 文件
1.点 调试2.然后 选项和设置3.右边勾上 启用源服务器支持4.左边点 符号5.把微软符号服务器勾6.运行的时候等一下 莫慌!!7.问题解决
- Mac下PHP环境的搭建
Mac下PHP环境的搭建 目录 Mac下PHP环境的搭建(基于XAMPP) phpmyadmin Mac下PHP环境的搭建(基于XAMPP) 下载XAMPP的Mac版 启动Apache Web Ser ...
- Hadoop从2.2.0到2.7
Hadoop2.2.0 GA release 通用版本,Hadoop2.2.0就是一个通用版本 Hadoop2.2.0是从Hadoop1.1.0升级过来的,增加了以下特性: 1.增加了YARN: 2. ...
- iOS block进行页面之间传值
#import <UIKit/UIKit.h> @interface FirstViewController : UIViewController @property (weak, non ...
- iOS - UI - UITableView
1.UITableView 表格视图 服从数据源 - (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSIn ...
- IOS开发之上传APP
IOS开发最终都会上传APP,但是当我们做好一个项目后.在上传AppStore上的时候往往会被各种原因打回来.让人蛋疼无比. 于是总结了比较容易出现项目被打回容易出现的原因 1.程序崩溃会被打回 这个 ...
- Java学习笔记——JDK1.7的新特性。
1,switch中可以使用字串 Java代码: String s = "test"; switch (s) { case "test" : System.out ...
- MySQL关于InnoDB的几个错误
阿里云服务器上装有MySQL 5.6,这几天MySQL服务经常死掉,启动MySQL服务(service mysql start),却报如下错误 Starting MySQL.. ERROR! The ...
- Shell学习笔记 - 环境变量配置文件
一.source命令 功能:在当前bash环境下读取并执行配置文件中的命令 1. 命令格式 source 配置文件 或 . 配置文件 2. 命令示例 [root@localhost ~]# sou ...