新项目组使用完善的angularMVVM设计思路架构,很庆幸能够来到这个项目组,在这里的每一天都能够学习到新的知识,为了防止以后忘记,记录一下个人的理解

首先接触最多的是directive,directive目前用到了以下几个属性, restrict,scope,link,templateUrl

首先是restrict:这个无需多说,用来定义自定义指令的使用形式,包括A属性,E标签,C是class,M是备注,最常用的就是EA,尤其是E可以在标签中使用自定义属性传参给父controller,或者定义回调函数等

temolateUrl:可以自定义一个模板文件,并将其在项目中的位置写在此处,这样就可以把需要展现的html格式传给这个自定义 指令并在使用的位置插入。

scope:该属性可以创建一个隔离的作用域,在这个作用域中的$scope与其他指令及controller中的scope是互相独立的,同时你也可以通过@,=和&来绑定一个变量,这个变量会和指令外层的controller进行双向数据绑定,无论那边有变动都会实时更新

@:为单向绑定,会将值得变动告诉外面调用该值的对象,=是双向数据绑定,&是绑定一个函数,外层可以通过调用这个函数来传递参数或方法。

如:

同时在外层的controller中如下使用:

link:简单理解为改指令自己的controller控制器,在其中可以编写控制这个指令页面元素的js代码。其中,可以为其传入$scope和el,前者是改指令的scope对象,后者为改指令元素本身,如上面图片中就是filter-infos标签,包括其中的class,attr等

angularJs工作日记-自定义指令Directive01的更多相关文章

  1. 带你走近AngularJS 之创建自定义指令

    带你走近AngularJS 之创建自定义指令 为什么使用AngularJS 指令? 使用过 AngularJS 的朋友应该最感兴趣的是它的指令.现今市场上的前端框架也只有AngularJS 拥有自定义 ...

  2. 【AngularJS】—— 8 自定义指令

    AngularJS支持用户自定义标签属性,在不需要使用DOM节点操作的情况下,添加自定义的内容. 前面提到AngularJS的四大特性: 1 MVC 2 模块化 3 指令 4 双向数据绑定 下面将会介 ...

  3. AngularJs 第一个自定义指令编写

    公司在做一个OA系统, 包括移动端(从微信企业号进入OA系统),电脑端. 电脑端还是用的传统的easyui做界面,asp.net mvc作为服务端.这个技术已经很成熟了配合权限框架很快就能开发出来.但 ...

  4. 20170831工作日记--自定义View学习

    学习了LayoutInflater的原理分析.视图的绘制流程.视图的状态及重绘等知识,按类型来划分的话,自定义View的实现方式大概可以分为三种,自绘控件.组合控件.以及继承控件.那么下面我们就来依次 ...

  5. 走进AngularJs(五)自定义指令----(下)

    自定义指令学习有段时间了,学了些纸上谈兵的东西,还没有真正的写个指令出来呢...所以,随着学习的接近尾声,本篇除了介绍剩余的几个参数外,还将动手结合使用各参数,写个真正能用的指令出来玩玩. 我们在自定 ...

  6. 走进AngularJs(三)自定义指令-----(上)

    一.有感而发的一些话 在学习ng之前有听前辈说过,angular上手比较难,初学者可能不太适应其语法以及思想.随着对ng探索的一步步深入,也确实感觉到了这一点,尤其是框架内部的某些执行机制,其复杂程度 ...

  7. AngularJS:如何使用自定义指令来取代ng-repeat

    引言 本文主要介绍了另一种即具有与ng-repeat 一样处理大量数据的绑定的功能,又具有超高的性能. 对于处理小数量,ng-repeat是非常有用的,但是如果需要处理非常大的数量集,还是采用自定义的 ...

  8. 带你走近AngularJS - 创建自定义指令

    带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...

  9. AngularJS高级程序设计读书笔记 -- 指令篇 之 自定义指令

    2. 自定义指令(15-17 章) Module.directive(name, factory) 2.1 创建自定义指令的方法 Module.directive(name, factory) 示例 ...

随机推荐

  1. 一个PHP书单 -摘自网络

    # PHP <PHP程序设计>(第2版) –PHP语法和入门最好的书 <PHP5权威编程> –PHP入门后升级书 <深入PHP:面向对象.模式与实践>(第3版) – ...

  2. The File's Owner

    The File Owner is an instantiated, runtime object that owns the contents of your nib and its outlets ...

  3. HDU 5750 Dertouzos

    Dertouzos Time Limit: 7000/3500 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)Total ...

  4. 利用xshell从windows上传文件到虚拟机

    Xshell实现Windows上传文件到Linux主机 经常有这样的需求,我们在Windows下载的软件包,如何上传到远程Linux主机上?还有如何从Linux主机下载软件包到Windows下:之前我 ...

  5. 利用Linq对集合元素合并、去重复处理

    本文转载:http://www.cnblogs.com/yjmyzz/archive/2012/12/18/2823170.html 今天写代码时,需要对一个数组对象中按一定规则合并.去重处理,不想再 ...

  6. 深入了解当前ETL中用到的一些基本技术

    数据集成是把不同来源.格式和特点的数据在逻辑上或物理上有机地集中,从而为企业提供全面的数据共享,是企业商务智能.数据仓库系统的重要组成部分.ETL是企业数据集成的概念出发,简要分析了当前ETL中用到的 ...

  7. 底部菜单栏(三)Fragment+FragmentTabHost实现仿新浪微博底部菜单栏

    一.实现效果图 二.项目工程结构 三.详细代码编写 1.主tab布局界面,main_tab_layout: 双击代码全选 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ...

  8. Kia&#39;s Calculation(贪心)

    pid=4726">http://acm.hdu.edu.cn/showproblem.php? pid=4726 大致题意:给两个长度小于10^6且相等的合法的正整数.你能够随意组合 ...

  9. 谷歌google搜索打不开、谷歌gmail邮箱及相关服务无法登录的解决的方法

    歌打不开 google打不开,与中国大陆封杀有关,可是主要是由于近期googleserver在全球范围内又一次进行了布局调整. 解决的方法是仅仅要改动用户本地计算机hosts文件就能够了. 一.Win ...

  10. "ORA-00942: 表或视图不存在 "的原因和解决方法

    "ORA-00942: 表或视图不存在 "的原因和解决方法   采用Oracle数据库,使用Powerdesigner设计,生成Sql文件导入后查询出现“ORA-00942: 表或 ...