Angular 常用指令 已经用了angular很久积累了一些很实用的指令，需要的话直接拿走用，有问题大家一起交流1.focus时，input:text内容全选 angular.module(my.directives).directive(autoselect, [function () {return {restrict: A,link: function (scope, element, attr) {if (element.is("input") && attr.type === "text") {var selected = false;var time = parseInt(attr["autoselect"]);element.bind("mouseup", function (e)...
关于datetimepicker的使用，参考：//www.gxlcms.com/article/99896.htm在AngularJs中使用实例：HTML代码：<div class="container" ng-app="myApp" ng-controller="myCtrl"> <div class="row"> <div class=col-sm-6> <div class="form-group"> <label>选择日期：</label> <!--指定 date标记--> <div class=input-group date datetimepicker id=datetimepicker1> <input type=text class="form-control" ng-model="dateOne"/> <span ...
本文实例讲述了AngularJS通过ng-route实现基本的路由功能。分享给大家供大家参考，具体如下： 为什么需要前端路由~ （1）AJAX不会留下History历史记录 （2）用户无法通过URL进入应用指定的页面（书签或者分享等） （3）AJAX对于SEO是一个灾难 1.一般情况下，我们访问网页的时候，是通过url地址。 比如我们访问一个网页:https://www.baidu.com/index/fix.html 在AngularJS中通过“#”来进行不同页面的路由，比如： https://www.baid...
本文实例讲述了AngularJS路由机制ngRoute。分享给大家供大家参考，具体如下： 引言 在我们介绍路由之前我们首先谈一下SPA，所以SPA就是我们现在经常说的单页应用single page APP，为了实现无刷新的视图切换我们之前的做法就是利用AJAX从后取出数据然后渲染在前台页面HTML中，但是AJAX有一个致命的缺点就是不能实现浏览器的后退按钮失效，为了解决这个问题我们通常使用hash，监听hashchange事件来进行视图切换，另一个方法是用HTML5...
Angular中的Promise 在用jQuery的时候就知道 promise 是 Js异步编程模式的一种模式，但是不是很明白他跟JQuery的deferred对象有什么区别。随着公司项目的进行，要跟后台接数据了，所以决定搞定它。 Promise Promise是一种模式，以同步操作的流程形式来操作异步事件，避免了层层嵌套，可以链式操作异步事件。 我们知道，在编写JavaScript异步代码时，callback是最最简单的机制，可是用这种机制的话必须牺牲控制流、异常处理和函数语...
AngularJS 获取ng-repeat动态生成的ng-model值 最近做项目遇到了ng-model是ng-repeat动态生成的，ng-model=”变量”，什么变量，是未知的，所以你无法在$scope."变量"取到值，就算取到值也是其中一个值，这样的问题，经过百度一番查找找到解决方案，这里记录下，也行可以帮助到大家。 代码 html <div><div class="modal-header"><h3 class="modal-title">用例集全局参数配置</h3></div><div class="modal-body"><tab...
常用的表单验证指令如下详情： 1. 必填项验证 某个表单输入是否已填写，只要在输入字段元素上添加HTML5标记required即可： <input type="text" required />2. 最小长度 验证表单输入的文本长度是否大于某个最小值，在输入字段上使用指令ng-minleng= "{number}"： <input type="text" ng-minlength="5" />3. 最大长度 验证表单输入的文本长度是否小于或等于某个最大值，在输入字段上使用指令ng-maxlength="{number}"： <input type=...
前言 最近关于AngularJS的资料也看了一些，其官网上有个实例Phonecat很不错，硬着头皮看了一会实在是看不下去，索性自己动手实现下，遇到问题时再从里面寻找答案也不失为一种好方法。说的再多、看的再多不如自己动手去做一遍，那就开始吧。 正文 1、布局 布局很简单，首页侧边栏是一个输入框和下拉框，右边是一个列表，实现时对首页不做大的修改。详情页做一些改变，尽量做一些简化，考虑加一个自定义指令（轮播图）。 2、架构分析...
AngularJS extend用法 angular.extend:依次将第二个参数及后续的参数的第一层属性（不管是简单属性还是对象）拷贝赋给第一个参数的第一层属性，即如果是对象，则是引用的是同一个对象，并返回第一个参数对象。 实例一：var r = angular.extend(b, a);将对象a的第一层属性（不管是简单属性还是对象）拷贝赋给对象b的第一层属性，即如果是对象，则是引用的是同一个对象，并返回对象bJs代码 var a = { name : bijian, addr...
双向绑定双向绑定是AngularJS最实用的功能，它节省了大量的代码，使我们专注于数据和视图，不用浪费大量的代码在Dom监听、数据同步上，关于双向更新，可看下图：数据-->视图 这里我们只演示有了数据以后，如何绑定到视图上。<!DOCTYPE html><html ng-app="App"> <head><script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/394/xjz9g1bv/angular.js"></script><script type="text/javascript">var App = angul...
AngularJS 表单和控件可以提供验证功能，并对用户输入的非法数据进行警告。注意：客户端的验证不能确保用户输入数据的安全，所以服务端的数据验证也是必须的。 1、HTML 控件以下 HTML input 元素被称为 HTML 控件:input 元素、select 元素、button 元素、textarea 元素。 2、HTML 表单 AngularJS 表单是输入控件的集合。HTML 表单通常与 HTML 控件同时存在。<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>an...
本文实例讲述了AngularJS的MVC架构。分享给大家供大家参考，具体如下： MVC应用程序架构最早于1970年起源于Smalltalk语言，后来在桌面应用程序开发中使用较为广泛，如今在WEB开发中也非常流行。MVC的核心思想是將数据的管理（Model）、业务逻辑控制（Controller）和数据的展示（View）分离开来，使程序的逻辑性和可维护性更强。 对于AngularJS应用来说，视图（View）是DOM（文档对象模型），你可以理解为就是HTML页面。控制器（Con...
angular2 的依赖注入包含了太多的内容，其中的一个重点就是注入器，而注入器又非常难理解，今天我们不深入介绍注入器的内容，可以参考官方文档，我们今天来说注入器的层级。 也就是组件获取服务的容器会选择具体哪一个。 先简单介绍一个背景：有3个组件AppComponent 根组件、DetailList组件 ( 日志列表组件)、Detail组件( 日志组件)。这三个组件会形成一个组件树，对应的我们也可以认为每个组件都会有一个独立的注入器(有时候不会出...
表单验证 我去，我感觉我这个人其实还是一个很傻逼的一个人，老是因为拼错了一个单词或者怎么样就浪费我很长时间，这样真的不行不行，要正确对待这个问题，好了，说正题吧，angular也有表单验证minlength,maxlength,required呀这些个东西，还有也支持h5的那些验证,h5的那些验证，就是type啦，type=email,number,url呀这些，然后现在要用angular来验证，可以定义样式哈，不错，然后怎么验证呢，好的上代码 <!DOCTYPE html> <html ng...
我现在做的一个项目是angular,但是我用直接引用百度地图的方法引进js,写html,js代码，发现，我去，报错了，我一开始还以为是百度地图跟angular有冲突，然后我就去搜索啊，发现angular也有一个百度地图插件，无奈我用了报错了，网上说要用angular2版本才能兼容，但是我又不会下载2版本，所以我就放弃了，然后呢，我又去解决我一开始的那个错误了，发现，玛德我傻逼了，首先来说一下百度地图怎么用吧，很简单，上代码 首先引入js <sc...