2017年09月_wjxbj

原创 ng指令中controller与link的区别

一.指令中controller与link的区别　　我们都知道在ng的指令中，返回的对象中有两个重要的属性：// link function{ link: function(scope, iElem, iAttrs, ctrl) { ... }, controller: function($scope, $element, $attrs) { ... }}　...

2017-09-20 00:54:33 485

原创 AngularJS 之 Factory vs Service vs Provider

　　当你初试 Angular 时，很自然地就会往 controller 和 scope 里堆满不必要的逻辑。一定要早点意识到，controller 这一层应该很薄；也就是说，应用里大部分的业务逻辑和持久化数据都应该放在 service 里。我每天都会在 Stack Overflow 上看到几个同类的问题，关于如何在 controller 里保存持久化数据。这就不是 controller 该干的...

2017-09-10 14:53:28 89

原创 AngularJS内幕详解之Directive

　　在这系列的上一篇文章，我讨论了scope事件以及digest循环的行为。这一次，我将谈论指令。这篇文章包括独立的scope，内嵌，link函数，编译器，指令控制器等等。　　如果这个图表看起来非常的费解，那么这篇文章很适合你。　　声明: 这篇文字是基于 AngularJS v1.3.0 tree. 一.到底什么是指令(directive)？　　AngularJS中，...

2017-09-10 14:43:58 250

原创 AngularJS内幕详解之Scope

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

2017-09-10 14:37:56 130

原创 AngularJS表单验证

一.常用的表单验证指令<div class="col-md-6"> <form role="form" class="form-horizontal"> <div class="form-group"> <div class="col-md

2017-09-09 09:37:38 146

原创 AngularJS——简单表单验证

　　客户端表单验证是AngularJS里面最酷的功能之一，AngularJS表单验证可以让你从一开始就写出一个具有交互性和可相应的现代HTML5表单。　　在AngularJS中，有许多表单验证指令。在这里，我们将谈谈几个最流行指令，然后我们将讨论如何编写自定义的验证。<form name="form"> <label name="email">Your em...

2017-09-09 09:24:02 212

原创 AngularJs表单校验实例

app.html<!DOCTYPE html><html ng-app="angularFormCheckModule"> <head> <meta charset="UTF-8"> <title>angular表单校验</title>

2017-09-09 09:09:18 157

原创基于AngularJs + Bootstrap + AngularStrap 省市区联动实践

test.html<!DOCTYPE html> <html lang="zh-CN" ng-app="App"> <head> <meta charset="UTF-8"> <title>前端研究</title> &amp

2017-09-09 09:02:59 211

原创 Angularjs自定义指令实现三级联动选择地理位置

　　这篇文章主要介绍了Angularjs自定义指令实现三级联动，选择地理位置，以便以后工作需要可以参考。　　Angularjs自定义指令实现三级联动效果图：<html lang="zh-CN" ng-app="myApp"> <head> <meta charset="utf-8"> <meta http-equiv=&qu

2017-09-09 08:16:37 189

原创单页面webApp和路由(ng-route)

　　路由($route)这个东西(也许可以加上$location)可以说是ng最重要的东西了，因为angular目前最重要的作用就是做单页面webApp，而路由这个东西是能做到页面跳转的关键。一.单页面webApp　　为什么叫单页面webApp？因为它是单页面的。额，关键在于我们看到的不少webApp是多页面的啊，可以从一页跳到另一页。嗯，看起来是这样，不过实际上这几页实际还是一个页面，...

2017-09-07 00:36:07 405

原创 angular中的路由简单使用

　　在单页面应用程序中比如angular应用，我们需要根据url的变化(即：不同的请求)，来分配不同的资源。根据请求的URL来决定执行哪个模块，这个过程叫路由，同时，我们需要设计路由规则。　　下面给出一个简单的小demo：<!DOCTYPE html> <html> <head> <meta charset="UTF-...

2017-09-07 00:30:03 138

原创深究AngularJS—如何获取input的焦点（自定义指令）

一.写在前面　　关于如何获取input框、textarea等的焦点，网上有许多文章都只是会跟你说ng-focus这个内置指令。像这种解答，只能说明作者并为真正理解人家的需求。ng-focus是一个事件，跟原生JS（JavaScript）的onfocus是一样的，当我们点击input框时，就会触发该事件，而在该事件里我们可以调用一个函数。所以，当人家问你如何获取焦点时一般的意思是，如果我进行...

2017-09-07 00:25:01 634

原创深究AngularJS——监听模型$watch

一.前言　　1.$watch是scope内置的函数，它的作用是用来监听数据的变化。　　2.$watch可监听哪些数据？　　单个对象的属性　　需要计算的结果（函数）　　3. 语法: $scope.$watch(F,M,B); 二.对$watch参数的了解　　F：要监听的数据（表达式或函数的字符串），主要是监听这些数据改变没有。它会返回被监听数据的当前值。...

2017-09-07 00:19:32 145

原创 angular中的异常机制与异常之外的处理

　　在查阅angularjs的官方文档发现：文档中提到了throw异常angular.module('exceptionOverride', []).factory('$exceptionHandler', function() { return function(exception, cause) { exception.message += ' (caused by "...

2017-09-07 00:05:58 1168

原创 jQuery 中的 Deferred 和 Promises

　　看前首先了解：Promises/A规范，具体可以看这里，http://bijian1013.iteye.com/blog/2392429　　由于jQuery版本问题对Deferred对象的实现有所不同，具体请参照jQuery api。　　jQuery.Deferred()基于Promises/A规范实现，因为jQuery本身的设计风格，jQuery.Deferred()并没有完全遵...

2017-09-06 22:24:37 209

原创 jQuery 中的 Deferred 和 Promises-Promises/A规范

　　Javascript里异步编程逐渐被大家接受，先前大家一般通过回调嵌套，setTimeout、setInterval等方式实现，代码看起来非常不直观，不看整个代码逻辑很难快速理解。Javascript里异步函数大概有I/O函数（Ajax、postMessage、img load、script load等）、计时函数（setTimeout、setInterval）等。　　这些我们都很熟悉，...

2017-09-06 22:07:51 202

原创 jQuery的deferred对象详解

　　jQuery的开发速度很快，几乎每半年一个大版本，每两个月一个小版本。　　每个版本都会引入一些新功能。今天我想介绍的，就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象。　　这个功能很重要，未来将成为jQuery的核心方法，它彻底改变了如何在jQuery中使用ajax。为了实现它，jQuery的全部ajax代码都被改写了。但是，它比较抽象，初学者很难掌...

2017-09-05 00:53:20 90

原创 net::ERR_BLOCKED_BY_CLIENT的解决办法

　　最近打开某些网页出现如下错误：某个第三方扩展程序已阻止对此网页的访问。以下是一些建议：? 停用您的扩展程序，然后重新加载此网页。错误20 (net::ERR_BLOCKED_BY_CLIENT)：对服务器的请求已遭到某个扩展程序的阻止。　　经搜索发现，挺多人遇到这个问题，有些是打开网页遇到，有些是在玩网页游戏遇到等等，网上我也没找到确切的解决办法，只能自己想办法了。根据错误描述，应该是遭...

2017-09-05 00:40:44 20590 4

原创理解$watch ，$apply 和 $digest --- 理解数据绑定过程

　　Angular用户都想知道数据绑定是怎么实现的。你可能会看到各种各样的词汇：　　　$watch,$apply,$digest,dirty-checking... 它们是什么？它们是如何工作的呢？这里我想回答这些问题，其实它们在官方的文档里都已经回答了，但是我还是想把它们结合在一起来讲，但是我只是用一种简单的方法来讲解，如果要想了解技术细节，查看源代码。一.浏览器事件循环和An...

2017-09-05 00:22:04 127

AngularJS单选、复选框

　　在项目开发中，有应用到单选、复选框，对于Angular来讲，其实有很多实现方法。如下应用实例：一.AngularJS radio单选实例　　在页面上有几个项目名称，每个名称前面都有一个checkbox，如果打上勾，则表示这个项目已经完成，如果没有打钩，则表示未完成。　　然后在下方设置一个输入框，用来输入新增加项目的名称，再下边是两个radio按钮，只能选择一个，用来选择新增肌的...

2017-09-04 21:59:36 943

原创 Chrome开发者工具中关于“Deferred long-running timer task(s) ”的警告

　　在项目中做angularjs短信验证码及秒倒计时这样的功能时，F12有时候能看到“Deferred long-running timer task(s) ”的警告。　　网上查到相关的解释，特意写在这里，以免忘记。　　浏览器中报错的信息如下：　　答案描述：　　这个问题主要发生在当Blink(Chrome的渲染引擎)决定延时执行一个定时器函数的时候。比如：通过requestAn...

2017-09-03 08:42:18 300

原创理解和解决angularJS报错$apply already in progress

　　如果我们使用了AngularJS中的$scope.$apply()或者$scope.$digest()，我们很可能会遇到类似下面的错误，虽然这个错误没有太大影响，但是在日志中看起来还是很不爽的，日志中记录的异常或者错误，就应该是需要关注和解决的问题，否则就没有必要出现在日志中了。Error: [$rootScope:inprog] $apply already in progress ...

2017-09-02 21:51:33 633

angularjs短信验证码及秒倒计时

　　工作H5开发需要做短信验证码及秒倒计时，如果是用纯JS做好像还比较容易，但用angularJS做还是一些坑，特此记录一下，有如下几种实现方式。一.setTimeout方式实现<html><head> <title>AngularJs倒计时</title></head><body> <d...

2017-09-02 20:56:12 660

原创 jQuery幻灯片插件slick实例

　　由于工作要将图片做成幻灯片样式，于是想到了JQuery插件slick，上网查了一下，一些效果用法实例特意在此记录下：一.单个显示<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <title>jQuery幻灯片

2017-09-02 20:12:41 2313

AngularJS过滤器filter

　　在开发中，经常会遇到这样的场景：　　如用户的性别分为“男”和“女”，在数据库中保存的值为1和0，用户在查看自己的性别时后端返回的值自然是1或0，前端要转换为“男”或“女”再显示出来；　　如我要换个羽毛球拍，某猫上羽毛球拍的品牌多达数十种，我想单独查看YONEX这个品牌的羽毛球拍；　　买完羽毛球拍我还想买一桶羽毛球，点击按销量排序展示商品；　　以上三种场景分别对数据进行了转换...

2017-09-01 00:08:48 278

wjxbj的博客