文档章节

AngularJS 学习笔记 (五) 基本概念和用法 之 指令

Asktao
 Asktao
发布于 2016/06/17 09:23
字数 1608
阅读 84
收藏 5
点赞 0
评论 0

1、解析最简单的指令hello,匹配模式restrict

    html代码:

    

    JS代码:

    

PS:我理解的是以这4种方式获取元素,然后替换成template的样式。

2、解析最简单的指令hello,template、templateUrl、$templateCache

    2.1 template

    

    还是这个例子,template中的字符串替换原指令上的东西。

    2.2 templateUrl

    

    PS:这里想到的比如登录框~就可以用一个,然后出现一个登录框,可以在页面随意调用。只要使用就可以了。

    2.3 $templateCache

    

    PS:这里对$template.put("xx.html","tt")理解的不好。

            引入xx.html时,xx.html中有内容。为什么加上第二个参数之后,内容就显示不出来了

            难道是只是起个名字叫做xx.html?以后好相认?求指导!

3、解析最简单的指令hello,replace与transclude

    3.1 replace

    

    3.2 transclude (百度翻译:嵌入)

    html代码:

    

    JS代码:

    

    运行效果:

    

    运行效果解析:

    

4、comile与link(操作元素、添加CSS样式、绑定事件)

    

5、指令与控制器之间的交互

    html代码:

    

    JS代码:

    

    PS:这里要多看一遍,才能大概理解。可以使用scope.$apply("loadData");达到同样的效果

    5.2 指令和多控制器的交互

    html代码:

    

    JS代码:

    

    运行效果1:初始时状态

   

    运行状态2:当鼠标在进入“滑动加载”时

    

    运行状态3:当鼠标在进入“滑动加载2”时

    

    理解指令和控制器的交互:  

  1.  单对单:

    1. 在控制器MyCtrl中定义方法loadData();
    2.   在指令中定义标签,利用link方式定义DOM操作。
    3. 当运行时,达到触发条件后,调用loadData()方法,操作DOM变化。
  2. 单指令对多控制器

    1. 再定义一个控制器MyCtrl2,在其中再定义一个方法loadData2()
    2. 在HTML页面增加新元素MyCtrl2和其子层。
    3. 在标签中增加属性howToLoad,并分别赋值loadData()和loadData2()
    4. 上述步骤使用howToLoad属性作为公共变量,存放相应的控制器中的方法。这样做的好处是,可以统一调取howToLoad属性,一个x.directive("loader",func(){}}})就可以了。

6、指令间的交互

    html代码:

    

    JS代码:

    

    运行效果,当鼠标进入时:

    

    思考:(先吐槽,这个游戏一点意思也没有!!!!我失落了好久)

  1. html中增加标签, 并增加 strength、speed、light属性。
  2. 在JS中使用directive,创建superman的指令。
  3. 并且使用controller:function(){}给指令创建方法。等待被调用。
  4. 再增加link:function(){},指定触发方式和触发效果。
  5. 在JS中再创建依赖superman指令的指令。使用require:"^superman"
  6. 并绑定在superman的controller中定义的方法。
  7. 效果就是当superman标签有什么属性时,就输出这个属性。
  8. 所以我最后给这个所谓的游戏起名为,点谁就展示谁的能力。(自我满足吧)

7、scope的类型与独立的scope

    html代码:

    

    JS代码:

    

    运行效果1:

    

    运行效果2:如果不使用scope:{}

    

PS:如果没有使用独立scope,则任意地方输入内容,其他地方全部都受影响。

8、scope绑定策略

    @方式

    html代码:

    

    JS代码:

    

    运行效果:是以字符串方式传递

    

    =方式:

    html代码:

    

    JS代码:

    

    运行效果1:

    

    PS:运行之后,修改任意地方的数据,另一个数据也会改变。

    &方式:

    html代码:

   

    JS代码:

    

    运行效果:

    

    理解过程:

  1. 结构如上
  2. button的ng-click使用“&”方式,并传入参数,参数是模型上面的input的内容。
  3. 找到HTML页面的greeting标签内的greet属性,greet属性绑定了sayHello方法,并带入参数。
  4. 触发MyCtrl控制器中的sayHello方法,页面弹出Hello+name的提示框。

9、AngularJS内置指令

这里讲的比较草,主要的是还是去看文档。

可以定义新的标签,也可以重写过去的标签。

一个例子,使用form标签:

    HTML代码:

    

    JS代码:

    

这里要解释几个东西就会清晰:

  1. required指令: 相当于html5的required属性,验证不能为空
  2. ng-maxlength属性: 验证内容的长度最大值
  3. ng-minlength属性: 验证内容的长度最小值
  4. 表单名.$valid : 这个属性用来获取表单验证的状态,如果所有的验证都通过了,它就是true,只要有一项不通过,它就是false
  5. ng-disabled属性: 判断按钮是否禁用. 值为true时,禁用该按钮
  6. type属性: type="email" , type="number" ,虽然这些都是html5的属性,但是在angular中用法一致,可以兼容不支持html5的浏览器,实现相同的功能

PS:重点,这里的重点,重点在于啃文档,多练习!

10、实例解析Expander(展开)—— 自定义指令

一个展开关闭的小例子

    HTML代码:

    

    JS代码:

    

    运行效果:点击前和点击后的效果

     

挺好理解的:这里运用了之前的知识点transclude,果然还是实践出真知。

11、实例间隙Accordion(复合)

一个展开关闭的复杂例子

    HTML代码:

    JS代码:

    CSS代码:

    

    运行效果:默认为都关闭。点击一个打开一个。最多只显示一个是打开的。

    理解过程:

  1. 不知道从何说起,这是图片有详细的备注,多看多试!
  2. 有一个坑,<expander expander-title="expander.title">
  3. 独立scope设置,title:"=expaderTitle" 绑定title
  4. 如果有 "-"链接,则独立scope中"-"后面的要大写,以区分。(好坑!)

12、指令的运行原理:compile与link

  1. compile和link是互斥的,如果设置了compile则会忽略link
  2. compile是在编译阶段中执行的,link是在链接过程中执行的。
  3. 换句话说compile是在编译DOM之前操作DOM的;
  4. link是在DOM编译完成之后,再操作DOM的。

 

13、总结:ERP类型的系统必备的UI组件

PS:这里是用的miniui。网址:http://miniui.com/

14、总结:互联网/电商型系统必备的UI组件

PS:地址错误,更新地址  http://docs.kissyui.com/

15、第三方指令库angular-ui

用到的时候再说吧

github地址:http://angular-ui.github.io/ 

 

16、Driective思想的起源和原理概述

这里是采访原作者 ,他说原理是启发自FLEX。

 

 

洋洋洒洒学了2个星期的指令,感觉还是皮毛。代码果然还是项目上手最快!

 

 

 

© 著作权归作者所有

共有 人打赏支持
Asktao
粉丝 26
博文 88
码字总数 111126
作品 0
丰台
程序员
【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878 ⋅ 05/19 ⋅ 0

JavaScript MVW 框架 - AngularJS

Angular JS (Angular.JS) 是一组用来开发 Web 页面的框架、模板以及数据绑定和丰富 UI 组件。它支持整个开发进程,提供 Web 应用的架构,无需进行手工 DOM 操作。 AngularJS 很小,只有 60K,...

匿名 ⋅ 2011/01/20 ⋅ 44

[Angular Material完全攻略] Day 01 - 开始 & 简介

转载 从Angular第2版正式release后,根据全球最大工程师讨论区StackOverflow的统计,从2016开始的Angular讨论度就不断窜升,甚至超越了React,直到了2017年,甚至摆脱了前一代Angularjs的阴影...

readilen ⋅ 05/21 ⋅ 0

Angular 6正式版发布,都有哪些新功能

在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。除此之外,这次更新还包括框架包(@angu...

code_xzh ⋅ 05/05 ⋅ 0

Angular 6.0正式版发布,都有哪些新功能

点击关注异步图书,置顶公众号 每天与你分享IT好书 技术干货 职场知识 在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在...

异步社区 ⋅ 05/08 ⋅ 0

再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

Angular 的数据绑定采用什么机制,详述原理? 脏检查机制。阐释脏检查机制,必须先了解如下问题。 单向绑定(ng-bind) 和 双向绑定(ng-model) 的区别? ng-bind 单向数据绑定($scope ->...

634117608 ⋅ 04/19 ⋅ 0

[Angular Material完全攻略] Day 02 - 环境设定 & 安装 & Hello World

今天我们将开始正式迈入Angular Material的世界,要学习使用Angular Material打造高品质及高质感的网页,当然要从安装Angular Material套件开始,本篇文章就来介绍基本的Angular Material安装...

readilen ⋅ 05/21 ⋅ 0

Angular 6 服务端渲染之 udao 终章

先介绍下小朋友 udao,首先是一个开源项目,代码足够简单,其次是跟随 Angular 大小版本一起成长的项目,会定期更新所有依赖包以及兼容最新版本的写法 Github 地址也贴出来好多次了:github....

orangexc ⋅ 05/10 ⋅ 0

源码分析 @angular/cdk 之 Portal

Portal 是什么 最近在学习 React 时,发现 React 提供了 Portals 技术,该技术主要用来把子节点动态的显示到父节点外的 DOM 节点上,该技术的一个经典用例应该就是 Dialog 了。设想一下在设计...

lx1036 ⋅ 05/29 ⋅ 0

初学angular 看到网上有angular js 也有angular2 ,到angular官网发现最近版本是6了,那么现在大家说的angular js到底是什么啊?

初学angular 看到网上有angular js 也有angular2 ,到angular官网发现最近版本是6了,那么现在大家说的angular js到底是什么啊? angular2和现在官网的angular6 就是 angular js 只是版本不同...

Jordan裔 ⋅ 05/19 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

个人博客的运营模式能否学习TMALL天猫质量为上?

心情随笔|个人博客的运营模式能否学习TMALL天猫质量为上? 中国的互联网已经发展了很多年了,记得在十年前,个人博客十分流行,大量的人都在写博客,而且质量还不错,很多高质量的文章都是在...

原创小博客 ⋅ 今天 ⋅ 0

JavaScript零基础入门——(十一)JavaScript的DOM操作

JavaScript零基础入门——(十一)JavaScript的DOM操作 大家好,欢迎回到我们的JavaScript零基础入门。最近有些同学问我说,我讲的的比书上的精简不少。其实呢,我主要讲的是我在开发中经常会...

JandenMa ⋅ 今天 ⋅ 0

volatile和synchronized的区别

volatile和synchronized的区别 在讲这个之前需要先了解下JMM(Java memory Model :java内存模型):并发过程中如何处理可见性、原子性、有序性的问题--建立JMM模型 详情请看:https://baike.b...

MarinJ_Shao ⋅ 今天 ⋅ 0

深入分析Kubernetes Critical Pod(一)

Author: xidianwangtao@gmail.com 摘要:大家在部署Kubernetes集群AddOn组件的时候,经常会看到Annotation scheduler.alpha.kubernetes.io/critical-pod"="",以表示这是一个关键服务,那你知...

WaltonWang ⋅ 今天 ⋅ 0

原子性 - synchronized关键词

原子性概念 原子性提供了程序的互斥操作,同一时刻只能有一个线程能对某块代码进行操作。 原子性的实现方式 在jdk中,原子性的实现方式主要分为: synchronized:关键词,它依赖于JVM,保证了同...

dotleo ⋅ 今天 ⋅ 0

【2018.06.22学习笔记】【linux高级知识 14.4-15.3】

14.4 exportfs命令 14.5 NFS客户端问题 15.1 FTP介绍 15.2/15.3 使用vsftpd搭建ftp

lgsxp ⋅ 今天 ⋅ 0

JeeSite 4.0 功能权限管理基础(Shiro)

Shiro是Apache的一个开源框架,是一个权限管理的框架,实现用户认证、用户授权等。 只要有用户参与一般都要有权限管理,权限管理实现对用户访问系统的控制,按照安全规则或者安全策略控制用户...

ThinkGem ⋅ 昨天 ⋅ 0

python f-string 字符串格式化

主要内容 从Python 3.6开始,f-string是格式化字符串的一种很好的新方法。与其他格式化方式相比,它们不仅更易读,更简洁,不易出错,而且速度更快! 在本文的最后,您将了解如何以及为什么今...

阿豪boy ⋅ 昨天 ⋅ 0

Python实现自动登录站点

如果我们想要实现自动登录,那么我们就需要能够驱动浏览器(比如谷歌浏览器)来实现操作,ChromeDriver 刚好能够帮助我们这一点(非谷歌浏览器的驱动有所不同)。 一、确认软件版本 首先我们...

blackfoxya ⋅ 昨天 ⋅ 0

线性回归原理和实现基本认识

一:介绍 定义:线性回归在假设特证满足线性关系,根据给定的训练数据训练一个模型,并用此模型进行预测。为了了解这个定义,我们先举个简单的例子;我们假设一个线性方程 Y=2x+1, x变量为商...

wangxuwei ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部