angular学习（二）-- Directive

angular学习(二):Controller定义总结

上文中总结完了ng-view的应用,将运维后台分开界面到2个,进行到逻辑Controller处理中,本文将总结一下在项目中Controller都用到了哪些知识: $scope:作用域对象,仅仅是代表本Controller对象,本作用域的不论什么对象都用$scope来声明. $rootScope:代表整个页面作用域,能够在随意子$scope之间传递全局对象 $http:用来发送http请求的对象. 设置header var module =angular.module('index'); //设…

angular学习笔记(二)-创建angular模块

如果在页面的html标签(或任意标签)中添加ng-app,表示对整个页面应用angular来管理. 他是一个模块. 模块有助于把东西从全局命名空间中隔离. 今天学习如何自定义创建模块: <!DOCTYPE html> <html> <head> <title>2.1模块</title> <meta charset="utf-8"> <script src="../angular.js"&g…

angular学习的一些小笔记(中)之directive

directive里面的几个配置,上代码就清晰了 <!DOCTYPE html> <html ng-app='app'> <head> <meta charset='UTF-8'> <title>test</title> <script type="text/javascript" src='static/plugins/angular.min.js'></script> </head…

AngularJs学习笔记--directive

原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directives匹配HTML并执行.这允许directive注册行为或者转换DOM结构. Angular自带一组内置的directive,对于建立Web App有很大帮助.继续扩展的话,可以在HTML定义领域特定语言(domain specific language ,DSL). 一.在HTML中引用direc…

学习AngularJs:Directive指令用法（完整版）

这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下本教程使用AngularJs版本:1.5.3 AngularJs GitHub: https://github.com/angular/angular.js/ AngularJs下载地址:https://angularjs.org/ 摘要:Directive(指令)笔者认为是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元素或LASS属性或ATTR属性…

Angular之指令Directive系列

项目筹备近期开启Angular学习,指令比较难理解所以记录备案,推荐Angualr实战学习视频大漠穷秋 Angular实战一.指令directive概述指令可以对元素绑定事件监听或者改变DOM结构而使HTML拥有像jQuery一样效果具有交互性.不同于jQuery,Angular设计核心思想是通过数据与模板的绑定,摆脱繁琐的DOM操作,而将注意力集中在业务逻辑上. 几种常见指令ng-app 指令用来指定ng的作用域是在那个标签以内部分(<html ng-app="myApp"…

angular学习笔记(三十)-指令(2)-restrice,replace,template

本篇主要讲解指令中的 restrict属性, replace属性, template属性这三个属性一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: E 2. 属性: A 3. 样式类: C 4. 注释: M restrict的值可以是上面四个字母的任意一个或多个的组合. 不指定的话默认为A. 二. replace: 布尔值.是否将指令元素替换,可以有两个值: 1.true: 替换整个使用指令的元素 2.false: 不替换整个使用指令的元素,而…

angular学习笔记(三十一)-$location(1)

本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的相关方法: 以 'http://localhost/$location/21.1%20$location.html#/foo?name=bunny#myhash' 这个路径为例: 1. 获取当前完整的url路径: $location.absUrl():// http://localhost/$loc…

angular学习笔记(三十)-指令(10)-require和controller

本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐directive> <inner‐directive></inner‐directive> </outer‐directive> 这里有两个指令,一个outer-directive指令元素,它里面又有一个inner-directive指令元素. js: app.directiv…

angular学习笔记(三十)-指令(7)-compile和link(2)

继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的代码: html: <body> <div ng-controller="compileCtrl"> <level-one> <level-two> <level-three> hello,{{name}} </level-…

angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指令(5)-link文章也提到了link函数的第五个参数linker. 这篇文章就来讲解一下transclude()方法(linker()方法),是怎么使用的,另外,它也是compile函数的第三个参数,用法一样. 下面就通过自己写一个简易的模拟ngRepeat的指令cbRepeat,来了解linke…

angular学习笔记(三十)-指令(5)-link

这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数:scope,iEle,iAttrs,ctrl,linker scope:指令所在的作用域,这个scope和指令定义的scope是一致的.至于指令的scope,会在讲解scope属性的时候详细解释 iEle:指令元素的jqLite封装.(也就是说iEle可以调用angular封装的简版jq的方法和属…

angular学习笔记(三十)-指令(1)-概述

之前在 angular学习笔记(十九)-指令修改dom 里面已经简单的提到了angular中的指令,现在来详细的介绍 '指令' 一.指令的创建: dirAppModule.directive('directive-name',function(){ var obj = { restrict:'string', priority:number, template:'string', templateUrl:'string', replace:bool, transclude:bool or 'el…

Angular学习-指令入门

1.指令的定义从用户的角度来看,指令就是在应用的模板中使用的自定义HTML标签.指令可以很简单,也可以很复杂.AngularJS的HTML编译器会解析指令,增强模板的功能.也是组件化未来的发展趋势,目前HTML5中也加入了很多新标签,但是在实际业务开发过程中,有很多复用的模板,加上复用的交互效果,可以将其编写为AngularJS的指令,开发工程师可以在同一个项目,或多个项目中使用,实现开发一次,到处使用的目标. 2.内置指令和自定义指令 AngularJS内部指令都是ng-diretivena…

angular学习的一些小笔记(中)之表单验证

表单验证我去,我感觉我这个人其实还是一个很傻逼的一个人,老是因为拼错了一个单词或者怎么样就浪费我很长时间,这样真的不行不行,要正确对待这个问题,好了,说正题吧,angular也有表单验证minlength,maxlength,required呀这些个东西,还有也支持h5的那些验证,h5的那些验证,就是type啦,type='email',number,url呀这些,然后现在要用angular来验证,可以定义样式哈,不错,然后怎么验证呢,好的上代码 <!DOCTYPE html> <ht…

emberjs学习二(ember-data和localstorage_adapter)

emberjs学习二(ember-data和localstorage_adapter) 准备工作首先我们加入ember-data和ember-localstorage-adapter两个依赖项,使用bower install安装这两个插件.如下 "dependencies": { "jquery": "~1.9.1", "ember": "~1.13.10", "handlebars"…

angular学习资源

angular学习资源 angularjs库: https://developers.google.com/speed/libraries/devguide?hl=zh-CN#angularjs angularjs学习教程: http://www.apjs.net/#dir2 https://docs.angularjs.org/tutorial/ …

ReactJS入门学习二

ReactJS入门学习二阅读目录 React的背景和基本原理理解React.render() 什么是JSX? 为什么要使用JSX? JSX的语法如何在JSX中如何使用事件如何在JSX中如何使用样式回到顶部 React的背景和基本原理在web开发中,我们总需要将变化的数据实时反应到UI上,这时就需要对DOM进行操作,复杂或频繁的对DOM操作是性能瓶颈产生的原因,React为此引入了虚拟的DOM的机制,在浏览器端使用javascript实现了一套DOM API,基于React开发时所有的…

angular Creating a Directive that Adds Event Listeners

<span my-draggable>Drag ME</span> angular.module('dragModule', []) .directive('myDraggable', ['$document', function($document) { return { link: function(scope, element, attr) { , startY = , x = , y = ; element.css({ position: 'relative', borde…

TweenMax动画库学习(二)

目录 TweenMax动画库学习(一) TweenMax动画库学习(二) TweenMax动画库学习(三) TweenMax动画库学习(四) TweenMax动画库学习(五) TweenMax动画库学习(六) 上一节我们主要聊了TweenMax动画库中的to():添加动画.play()播放动画.stop()停止动画.reverse()反向执行动画.onComp…

Hbase深入学习(二) 安装hbase

Hbase深入学习(二) 安装hbase This guidedescribes setup of a standalone hbase instance that uses the local filesystem. Itleads you through creating a table, inserting rows via the hbase shell, andthen cleaning up and shutting down your standalone hbase instan…

Struts2框架学习(二) Action

Struts2框架学习(二) Action Struts2框架中的Action类是一个单独的javabean对象.不像Struts1中还要去继承HttpServlet,耦合度减小了. 1,流程拦截器拦截请求,创建代理Action对象,执行方法,返回结果,界面跳转. 拦截器解析请求路径,获取Action的名称,到配置文件中查找action的完整类名,利用反射创建对象. 每请求一次,就创建一个对象,所以action是多例的,也是线程安全的. 2,关系请求的路径和配置文件的对应关系: 配置文件中包…

angular学习笔记04 理论加实践

scope: 布尔型或对象(默认为false) ,为true时继承父作用域并创建一个新的作用域隔离作用域具有隔离作用域的指令最主要的使用场景是创建可复用的组件, 组件可以在未知上下文中使用,并且可以避免污染所处的外部作用域或不经意地污染内部作用域.创建具有隔离作用域的指令需要将 scope 属性设置为一个空对象 {} .如果这样做了,指令的模板就无法访问外部作用域了: App.directive('myDirective', function() { return { restrict: 'A'…

Python学习二：词典基础详解

作者:NiceCui 本文谢绝转载,如需转载需征得作者本人同意,谢谢. 本文链接:http://www.cnblogs.com/NiceCui/p/7862377.html 邮箱:moyi@moyibolg.com 日期:2017-11-19 Python学习二:词典基础详解 (学习不要求多,小计划能学会体验到乐趣便可) 一:介绍 Python词典其实和java中的HashMap很像,都是通过哈希表实现的,都是键值对存贮方式,也就是说,词典是一个数组,而数组的索引是键经过哈希函数处理后得到的.其…

Quartz学习--二 Hello Quartz! 和源码分析

Quartz学习--二 Hello Quartz! 和源码分析三. Hello Quartz! 我会跟着第一章 6.2 的图来进行同步代码编写简单入门示例: 创建一个新的java普通工程引入对应版本jar包: jar包 maven地址为:  <dependency> <groupId>org.quartz-scheduler</groupId> <artifactId>qu…

SpringCloud学习(二)：微服务入门实战项目搭建

一.开始使用Spring Cloud实战微服务 1.SpringCloud是什么? 云计算的解决方案?不是 SpringCloud是一个在SpringBoot的基础上构建的一个快速构建分布式系统的工具集(全家桶). SpringCloud拥有SpringBoot的特点. 2.关于SpringCloud的版本? 大部分spring软件的版本是以:主版本.次版本.增量版本.里程碑版本的形式命名. Spring Cloud Angel SR6??? Angel是SpringCloud的一个大版本,Se…