正在初学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的更多相关文章

  1. angularjs中的directive scope配置

    angularjs中的directive scope配置 定义directive其中重要的一环就是定义scope,scope有三种形式: 默认的scope,DOM元素上原有的scope scope: ...

  2. AngularJS中有关Directive的汇总

    本篇通过几个例子对AngularJS中的Directive进行汇总. 例子1,单向绑定和双向绑定 <html ng-app="myApp"> <head> ...

  3. angularJs中自定义directive的数据交互

    首先放官方文档地址:https://docs.angularjs.org/guide/directive 就我对directive的粗浅理解,它一般用于独立Dom元素的封装,应用场合为控件重用和逻辑模 ...

  4. AngularJS中使用Directive、Controller、Service

    AngularJS是一款非常强大的前端MVC框架.同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉. (1)Directive 指令 (2)Controller 控制器 (3)Service ...

  5. angularjs中directive指令与component组件有什么区别?

     壹 ❀ 引 我在前面花了两篇博客分别系统化介绍了angularjs中的directive指令与component组件,当然directive也能实现组件这点毋庸置疑.在了解完两者后,即便我们知道co ...

  6. angularJS中directive与controller之间的通信

    当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的 ...

  7. AngularJs中,如何在父元素中调用子元素为自定义Directive中定义的函数?

    最近一段时间准备使用AngularJs中的自定义Directive重构一下代码. 在这里说明一下,把自定义控件封装成Directive并不一定是要复用,而是要让代码结构更加清晰.就好像你将一个长方法拆 ...

  8. AngularJS中自定义有关一个表格的Directive

    本篇体验在AngularJS中自定义一个有关表格的Directive.表格的需求包括: ● 表格结构 <table>    <thead>        <tr>  ...

  9. angularJS中directive父子组件的数据交互

    angularJS中directive父子组件的数据交互 1. 使用共享 scope 的时候,可以直接从父 scope 中共享属性.使用隔离 scope 的时候,无法从父 scope 中共享属性.在 ...

随机推荐

  1. 【JSP】JSTL使用core标签总结(不断更新中)

    使用core标签 在页面中使用taglib指令指定标签URI和prefix.如: <%@ taglib uri="http://java.sun.com/jsp/jstl/core&q ...

  2. 商户怎样选择商业wifi进行移动营销

    互联网移动营销的大潮席卷而来,带给很多其它的商户营销理念上的升级和更新.商业wifi营销成为很多其它的商户选择.以往,人们在咖啡店不过聊聊天喝喝咖啡,如今,人们能够更悠闲的歇息娱乐享受带有wifi的咖 ...

  3. DP之矩阵连乘问题

    最优二叉查找树的一道思考习题 同最优二叉查找树一样,矩阵连乘问题也是一个卡特兰数问题(其动态规划的构造过程都很像) 分析解答: a,铺垫的数学知识首先要搞清楚矩阵相乘是怎么乘的: 1)对于连续的n个矩 ...

  4. NopCmmerce Area前后台分离

    Nop 前后台是独立的应用程序:使用用Area技术分离:Nop.Admin项目放在Nop.Web项目的administration文件夹下面,通过编辑类库输入路径到Nop.Web的Bin目录下面: 分 ...

  5. JS后退, JS返回上一页, JS返回下一页

    Javascript 返回上一页: 1. history.go(-1), 返回两个页面: history.go(-2); 2. history.back(). 3. window.history.fo ...

  6. Long Long Message 后缀数组入门题

    Long Long Message Time Limit: 4000MS   Memory Limit: 131072K Total Submissions: 22564   Accepted: 92 ...

  7. Java基础知识强化之IO流笔记80:NIO之 ServerSocketChannel

    1. Java NIO中的 ServerSocketChannel 是一个可以监听新进来的TCP连接的通道, 就像标准IO中的ServerSocket一样.ServerSocketChannel类在 ...

  8. OC之Block的用法和实现委托

    Block的基本概念 Block的基本用法 Block实现委托机制 一.Block的基本概念 Block是程序的代码块,这个代码块可以在需要的时候执行.IOS开发中,block到处可见,所以学好很重要 ...

  9. maven安装仓库中不存在的jar包

    这里以ojdbc6.jar作为案例 首先我的ojdbc6.jar放在D盘的根目录D:\ojdbc6.jar 然后我们打开cmd命令窗口,运行命令:mvn install:install-file -D ...

  10. Visual Studio 扩展包(.vsix)制作

    前言:上篇介绍了 Visual Studio扩展工具添加与卸载,本编要介绍的是Visual Studio 扩展包(.vsix)的制作. 方法: ①.下载并安装Visual Studio 2010 SD ...