2016年08月_alex8046

转载 angularjs的自定义directive指令的绑定策略scope:”@”、”=”、”&”

通常我们知道指令默认是可以跟外界通信的.比如:<div ng-controller="mytest"> test自定义指令是可以访问到mytest控制器的scope要想把test自定义指令独立作用域,也就是说跟mytest切断关系:可以加

2016-08-24 14:15:09 6235

转载 Angular学习心得之directive——scope选项与绑定策略

大家知道，当scope选项写为scope:{}这种形式的时候，就已经为指令生成了隔离作用域，现在，我们来看看绑定策略的三种形式：& 、= 、@。首先是@，它将本地作用域和DOM中的属性值绑定起来（且这个属性的值必须是父级作用域中的），什么意思呢？说的简单一点就是假设你在模板中有个双花括号表达式，然后我们把表达式里的内容和html中指令里特定名字的属性绑定起来，还是不懂？看看下面的代码：

2016-08-24 14:12:59 737

转载 AngularJs 指令directive之controller，link，compile

关于自定义指令的命名，你可以随便怎么起名字都行，官方是推荐用[命名空间-指令名称]这样的方式，像ng-controller。不过你可千万不要用 ng-前缀了，防止与系统自带的指令重名。另外一个需知道的地方，指令命名时用驼峰规则，使用时用-分割各单词。如：定义myDirective，使用时像这样：。这里列出directive的合法命名：ng:bindng-bindng_bindx-

2016-08-24 14:08:52 3230

转载 AngularJS内幕详解之 Scope

在AngularJS的代码库中呈现出了大量有趣的设计，最有趣的两个例子是scope的工作方式和directives(指令)的表现。有的人第一次接触AngularJS时就被告知directives是和DOM交互，或供你随意操作DOM，就像jQuery. 这立马变得非常复杂，试想，scopes, directives 和controllers相互作用.复杂的设置之后，你开始学习它先进的

2016-08-24 14:06:12 9642

转载 AngularJS内幕详解之 Directive

如果这个图表看起来非常的费解，那么这篇文章很适合你。(Image credit: Angular JS documentation) (Large version)声明: 这篇文字是基于 AngularJS v1.3.0 tree.到底什么是指令(directive)？LinkAngularJS中，指令是通常是小的组件，这意味着跟DOM交互

2016-08-24 14:04:33 1320

转载 AngularJS Directive 隔离 Scope 数据交互

什么是隔离 ScopeAngularJS 的 directive 默认能共享父 scope 中定义的属性，例如在模版中直接使用父 scope 中的对象和属性。通常使用这种直接共享的方式可以实现一些简单的 directive 功能。当你需要创建一个可重复使用的 directive，只是偶尔需要访问或者修改父 scope 的数据，就需要使用隔离 scope。当使用隔离 scope 的时候，di

2016-08-24 14:02:30 557

转载《AngularJS》5个实例详解Directive（指令）机制

1.一点小说明指令的作用：实现语义化标签我们常用的HTML标签是这样的：一点点内容而使用AngularJS的directive（指令）机制，我们可以实现这样的东西：子面板1 子面板2 很多人可能要惊呼，这货和JSP或者Struts等等框架里面的taglib很像啊

2016-08-24 13:58:20 430

转载移动页面点击穿透问题解决方案

一.click与300ms延迟移动浏览器提供一个特殊的功能：双击（double tap）放大300ms的延迟就来自这里，用户碰触页面之后，需要等待一段时间来判断是不是双击（double tap）动作，而不是立即响应单击（click），等待的这段时间大约是300ms。之前有过简单介绍：黯羽轻扬：HTML5触摸事件移动事件提供了touchstart、touchmove、to

2016-08-24 13:53:02 7623

转载 javascript事件机制详解（涉及移动兼容）

前言这篇博客有点长，如果你是高手请您读一读，能对其中的一些误点提出来，以免我误人子弟，并且帮助我提高如果你是javascript菜鸟，建议您好好读一读，真的理解下来会有不一样的收获在下才疏学浅，文中难免会有不同程度的错误，请您指正留言 PS：事件阶段一节请看最新博客，之前理解有误javascript事件基础我们的网页之所以丰富多彩并具有交互功能，

2016-08-24 13:51:04 1498

转载点击穿透

What? -> Events!Why?How to fix?说在前面的话：点击穿透这种现象算是移动H5开发比较经典的问题，也常用来做面试题。借此现象谈谈移动事件。What现象描述：页面中存在上下两个层，上层元素具有表单，链接或者绑定相应事件，上层元素点击或触摸，导致上层DOM改变，下层中同样位置的元素触发点击事件。这种现象就是点击穿透（Ghost Clicks）。其实我觉

2016-08-24 13:48:35 2160

转载也来说说touch事件与点击穿透问题

前言做过移动端H5页面的同学肯定知道，移动端web的事件模型不同于PC页面的事件。看了一些关于touch事件的文章，我想再来回顾下touch事件的原理，为什么通过touch可以触发click事件，touch事件是不是万能的以及它可能存在的问题。touch事件的来源PC网页上的大部分操作都是用鼠标的，即响应的是鼠标事件，包括mousedown、mouseup、mousem

2016-08-24 13:46:36 6164

转载 AngularJS 常见面试问题

第一点区别是，ng-if 在后面表达式为 true 的时候才创建这个 dom 节点，ng-show 是初始时就创建了，用display:block 和 display:none 来控制显示和不显示。第二点区别是，ng-if 会（隐式地）产生新作用域，ng-switch 、 ng-include 等会动态创建一块界面的也是如此。这样会导致，在 ng-if 中用基本变量绑定 ng-mo

2016-08-24 13:39:47 1339

转载剖析AngularJS作用域

一、概要在AngularJS中，子作用域（child scope）基本上都要继承自父作用域（parent scope）。但，事无绝对，也有特例，那就是指令中scope设置项为对象时，即scope:{…}，这将会让指令创建一个并不继承自父作用域的子作用域，我们称之为隔离作用域（isolated scope）。指令中的scope一共可以有三个值，下面我们再来温习下：

2016-08-24 13:37:30 675

转载 ionic 中使用 slidebox 利用angular ng-repeat 渲染后不显示问题

I have same problem.Problem that, when Ionic parse html, it check:if (slides.length < 2) options.continuous = false;and even if you run $ionicSlideBoxDelegate.update(); it's not help, be

2016-08-24 13:32:59 770

转载 angularjs 密码一致性校验

angularjs 校验密码字段一致性 Js代码 directives.directive('pwCheck', function () { return { require: 'ngModel', link: function (scope, elem, attrs, ctrl) {

2016-08-23 17:12:08 1770

转载 Angularjs filter过滤器以及自定义filter过滤器

Angularjs filter过滤器 uppercase，lowercase大小转换 {{ "lower cap string" | uppercase }} //结果：LOWER CAP STRING{{ "TANK is GOOD" | lowercase }}

2016-08-23 17:02:06 1205

转载表单验证<AngularJs>

常用的表单验证指令 1. 必填项验证某个表单输入是否已填写，只要在输入字段元素上添加HTML5标记required即可： 2. 最小长度验证表单输入的文本长度是否大于某个最小值，在输入字段上使用指令ng-minleng= "{number}"： 3. 最大长度验证表单输入的文本长度是否小于或等于某个最大值，在输入字段上使

2016-08-12 01:40:52 978

转载 angularjs学习笔记—指令input

input[text]input一般和ngModel结合使用来实现双向绑定，同时angular提供了很多表单校验的指令required 必填ngRequired 必填（ngRequired可以控制是否是必填校验）ngMinlength 最小长度ngMaxlength 最大长度pattern 正则匹配ngPattern 正则匹配ngChange 内容改变时触发ngTrim 是

2016-08-12 01:37:58 527

转载 AngularJS ng-class用法

ng-class是AngularJS预设的一个指令，用于动态自定义dom元素的css class name，下面是其官网的api doc， AngularJS:ngClassng-class在实际的应用场景中还是比较灵活的，而在AngularJS中一般有三种方式给元素的class属性做一些门道，如下scope变量绑定（不推荐使用）function ctr($scope){

2016-08-12 01:36:04 1436

转载手机号码、电话号码正则表达式

原文链接：http://caibaojian.com/regexp-example.html手机号码正则表达式验证。function checkPhone(){ var phone = document.getElementById('phone').value; if(!(/^1[3|4|5|7|8]\d{9}$/.test(phone))){

2016-08-12 01:27:05 1148

转载 ionic之AngularJS扩展动态组件

1. 模态对话框 : $ionicModal模态对话框 : $ionicModal模态对话框常用来供用户进行选择或编辑，在模态对话框关闭之前，其他的用户交互行为被阻止。在ionic中使用模态对话框有三个步骤：1.声明对话框模板使用ion-modal-view指令声明对话框模板，对话框模板通常置入 script内以构造内联模板： 2.创建对话框对

2016-08-11 01:55:22 565

转载 ionic入门之色彩、图标和边距和界面组件：列表

色彩ionic定义了九种前景/背景/边框的色彩样式，：可以在任何元素上使用这些样式设置前景和背景颜色： class="positive-bg energized">...图标ionic使用ionicons图标样式库。ionicons采用了TrueType 字体实现图标样式，有超过500个图标可供选择。使用图标很简单，在元素上声明以下两

2016-08-10 10:38:07 1880

转载给你一个承诺 - 玩转 AngularJS 的 Promise

了解Promise在谈论Promise之前我们要了解一下一些额外的知识；我们知道JavaScript语言的执行环境是“单线程”，所谓单线程，就是一次只能够执行一个任务，如果有多个任务的话就要排队，前面一个任务完成后才可以继续下一个任务。这种“单线程”的好处就是实现起来比较简单，容易操作；坏处就是容易造成阻塞，因为队列中如果有一个任务耗时比较长，那么后面的任务都无法快速执行，或导

2016-08-09 15:18:07 1817

转载 JavaScript Promise启示录

一直以来，JavaScript处理异步都是以callback的方式，在前端开发领域callback机制几乎深入人心。在设计API的时候，不管是浏览器厂商还是SDK开发商亦或是各种类库的作者，基本上都已经遵循着callback的套路。近几年随着JavaScript开发模式的逐渐成熟，CommonJS规范顺势而生，其中就包括提出了Promise规范，Promise完全改变了js异步编程的写法，

2016-08-09 15:15:38 471

转载 angularjs 设置全局变量的7种方法

在ng-app或控制器中定义的全局变量，在不同的controller里都可以使用。1，通过var 直接定义global variable，这根纯js是一样的。2，用angularjs value来设置全局变量。3，用angularjs constant来设置全局变量。4，用angularjs rootscope来设置全局变量。5、定义服务。6、$rootScope。

2016-08-09 15:14:01 2527

转载 Angularjs promise对象解析

1、先来看一段Demo，看完这个demo你可以思考下如果使用$.ajax如何处理同样的逻辑，使用ng的promise有何优势？12345678910111213141516171819202122

2016-08-09 15:12:50 618

巴黎的妖