昨天在做app的聊天列表时，遇到了一个问题，消息监听器监听到了一个新的消息，但是如果这时已经处于消息列表的页面那么消息列表并不会及时更新。 我的想法是在service层中的监听器方法里，当监听到了一个新的消息，那么就在根作用域中发出一个广播，告诉controller层需要去获取最新的消息列表了。 service层中发出广播:controller层中接听广播:rootScope是所有scope的父级 它的广播(broadcast)和监听(on) 可以在无交集的controller...
前言 之前跟大家分享了关于 Android 原生实现验证码倒计时，地址是这里，现在公司使用 Ionic 开发的 App 也要实现类似的功能，现在也记录下来，供大家参考： 效果图：正文 首先介绍下与本文相关的概念 $interval $interval 是 window.setInterval 的 Angular 包装形式，函数如果在没有被取消的时候会无限执行。（取消使用 cancel(promise) ） 用法： $interval(fn,delay,[count],[invokeApply],[Pass]);参数说明： fn : 无限执行的...
虽说AngularJS 1.x版本中对于上拉加载，下拉刷新数据功能都有做些封装，但还是有些人不清楚。其实我一开始也是不懂的，so.现在把搞懂的记录下免得少走弯路。 now,begin:先说下拉刷新吧，原理就是每次下拉都重新去服务器请求过一次新的数据。一般这种刷新功能的响应数据（也就是服务器返回的（json）数据）中都会带有 "rowsOfPage": 3,"currentPage": 1,"totalPages": 10,"totalRows": 40,"rowsOfPage":10,"minRowNumber": 1,"maxRo...
说明： 1、前端只负责展示倒计时，不具备实际功能； 2、实际实现方式：数据库中设置一个每分钟执行一次的定时任务（故与实际情况会有一分钟以内的误差），只要订单创建时间超过15分钟会自动将订单状态改为“取消”。 遇到难点： 1、字符串转date中，苹果satari浏览器不支持“yyyy-mm-dd hh:mi:ss”格式，须将字符串转为“yyyy/mm/dd hh:mi:ss” new Date($scope.order.createtime.replace(/\-/g, "/")) 2、AngularJS 对JavaScript自...
最近在做AngularJS 项目，这是写的一个60秒倒计时, angularjs 与jq不同， 不是使用dom节点操作，而是数据操作，写倒计时，最好是使用$timeout与$interval ，不要使用settimeout与setinterval 。$timeout与$interval 可使绑定数据直接更新。 html <a href="javascript:" rel="external nofollow" ng-click="sendphonecode(reg_phone)" ng-class="paraclass" ng-bind="paracont">获取验证码</a> angularjs angular.module(controlle...
实现下面这样的需求：点击增加一块数据盘，会出现数据盘选项。 (1)最开始，想到原生JavaScript，jQuery (appendChild()等方法结合AngularJS来添加新的元素。但是突然发现控件里面的数据绑定，原生javascript没法控制。 (2)上网查资料，找到$compile服务，动态改变html内容。本以为这可以解决我的需求，但是仔细研究发现$compile是这样的东西。 用$compile服务创建一个directive ‘compile，这个complie会将传入的html字符串或者DOM...
本文实例讲述了AngularJS表单验证功能。分享给大家供大家参考，具体如下： 在AngularJS的管辖下，每个表单form都会创建一个ngFormController的一个实例。在表单里面的每个input都会创建一个在这个实例下的ngModelController实例，用以控制每个input的行为。 首先先从简单的验证开始。 AngularJs的ngModelController提供了几种属性：$pristine;$dirty;$valid;$invalid;$error pristine：表单并没有改变。 dirty：表单改变了。 valid...
Angular 支持非常强大的内置表单验证，maxlength、minlength、required 以及 pattern。使用 Angular 的内置表单校验能够完成绝大多数的业务场景的校验需求，但有时我们还需要实现更为复杂的表单校验功能，这时可以使用 Angular 提供的表单自定义校验（Custom Validator）。下面，我们就来了解一下如何使用 Angular 的自定义表单校验 效果图：1、首先，来创建我们的注册组件（register），并在模版中显示一个简单的表单 <h3 class="...
本文实例讲述了AngularJS实现的回到顶部指令功能。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="bootstrap.min.css" rel="external nofollow" ><script src="jquery.min.js"></script><script src="angular.js"><...
本文实例讲述了AngularJS+bootstrap实现动态选择商品功能。分享给大家供大家参考，具体如下： 项目中后台一个商品库，新建活动时动态选择所需商品 <!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="bootstrap.min.css" rel="external nofollow" ><scrip...
本文实例讲述了AngularJS自定义指令实现面包屑功能。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang="zh-CN" ng-app="myApp"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><script src="jquery.min.js"></script><script src="angular.js"></script><script src="bootstrap.min.js"></script><link re...
之前一直在用jQuery来做项目，使用比较熟练，目前公司要求使用angular来做项目，遇到一个登录模块如下所示，功能有两个方面，一个是点击按钮获取验证码，一个是点击登录验证表单。从用户体验角度来考虑有两个要注意的地方，默认两个按钮应该都是不可点击的，输入正确的手机号时验证码的按钮可点击，当再输入验证码时登录按钮可点击。 代码结构如下： <form name="loginForm" ng-controller="loginCtrl" ng-submit="submitForm(lo...
本文实例讲述了AngularJS使用拦截器实现的loading功能。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang="zh-CN" ng-app="myApp"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><script src="jquery.min.js"></script><script src="angular.js"></script><link rel="stylesheet" href="bootstrap.min.cs...
最终实现效果： index.html <!DOCTYPE html> <html><head><script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script><script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script><script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script><script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.3.1.js"></script>...
本文实例讲述了AngularJS前端页面操作之用户修改密码功能。分享给大家供大家参考，具体如下： 最近在做前端设计，主要使用的知识有AngularJS和nodejs来进行页面显示和数据请求、处理等工作。在设计页面比如忘记密码时，发现一个有效的设计思路是很重要的。 就以修改密码为例，要将提示信息友好的展示给用户，明确告诉用户在操作的过程中那部分有问题，这需要定义详细的变量以及能在页面的不同位置显示信息。下面的代码是自己写的一...