一、场景 二维码的场景，很多。这里是二维码一种小场景，比如分享一个链接，商品链接，项目链接，优惠券链接… 技术实现，如果用后端实现，需要构造输出一个图片流。或者后端生产二维码图片，给图片地址就好了。弊端，这个二维码就是一个链接，后端的文件 IO 操作，还得考虑存储。太费力。 如果前端实现，这样就很轻松了。这只是个分享二维码，分享出去给人家扫一扫。利用前端的 canvas，这里坐下调研。 jq 封装的 qrcode.js ,文章...
前言 由于controllers之间不共享scope，如果希望在controllers之间传递参数，可能需要通过其他的方式实现，以下是当前我用到的两种在controllers之间传递参数的方法。注:参考文章Sharing Data Between Angular Controllers 一、service 可以写一个包含get/set的service,取参数/赋参数 .factory(paramService,function(){return {result:[],getResult:function(){return this.result;},setResult:function(res){this.result = res;}...
下面一段代码给大家介绍了Angular在一个页面中使用两个ng-app的方法，具体代码如下所示： <!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"><title>ng-app指令,angular找到第一个ng-app就不会再找了，在一个页面中只使用一个ng-app.</title></head><body><input type="button" ng-app="myApp1" ng-controller="App1Controller" ng-click="do1()" value="按钮1" /><input type="button" ng-app="myApp2" ng-controller...
在上篇文章给大家介绍了Angular在一个页面中使用两个ng-app的方法，这种方法不太推荐，下面给大家介绍方法二，具体代码如下所示： <!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"><title>ng-app指令,angular找到第一个ng-app就不会再找了，在一个页面中只使用一个ng-app.</title></head><body ng-app="myApp"><input type="button" ng-controller="App1Controller" ng-click="do1()" value="按钮1" /><input type="...
jQuery，让我们对dom的操作更加便捷。由于其易用性和可扩展性，jQuer也迅速风靡全球，各种插件也是目不暇接。 我相信很多人并不能直接远离jQuery去做前端，因为它太好用了，我们以前做的东西大多基于jQuery和它的插件。而且现在Angular2的组件生态还不是很完善，我们在编写Angular的时候也许会想要用到jQuery。本篇文章就简单介绍下在Angular2中使用jQuery 如果你不知道怎么搭建Angular2开发环境，请参考这篇文章：//www.gxlcms.co...
angular中提供了forEach()方法用于遍历对象或数组，供大家参考，具体内容如下 function forEach(obj, iterator, context) {var key, length;if (obj) {if (isFunction(obj)) {for (key in obj) {// Need to check if hasOwnProperty exists,// as on IE8 the result of querySelectorAll is an object without a hasOwnProperty functionif (key != prototype && key != length && key != name && (!obj.hasOwnProperty || obj.has...
本文实例分析了AngularJS报错$apply already in progress的解决方法。分享给大家供大家参考，具体如下： 如果我们使用了AngularJS中的$scope.$apply()或者$scope.$digest()，我们很可能会遇到类似下面的错误，虽然这个错误没有太大影响，但是在日志中看起来还是很不爽的，日志中记录的异常或者错误，就应该是需要关注和解决的问题，否则就没有必要出现在日志中了。 Error: [$rootScope:inprog] $apply already in progress http://...
本文实例讲述了AngularJS实现使用路由切换视图的方法。分享给大家供大家参考，具体如下： 下面是一个简单的学生信息管理实例。 注意：除了引用angular.js之外，还要引用angular-route.js。 1、创建index.html主视图 在index.html主视图中，我们将会把多个视图共有的东西都放在里面，例如菜单。在这个例子中，我们仅仅把应用的标题放在里面，然后再用ng-view指令来告诉Angular把视图显示在哪儿。 <!DOCTYPE html> <html xmlns="http...
我们会在本文中探索 Angular 2 内建的自定义验证。 # 介绍 Angular 2 原生就支持一些有用的验证器： required: 验证字段必须存在minlength: 验证字段值的最小长度有效maxlength: 验证字段值的最大长度有效pattern: 验证输入的值是否匹配给定的模板，比如 email我们会基于下面的接口创建一个表单来获取用户信息。 // user.interface.ts export interface User {username: string; // required, must be 5-8 charactersemail: string...
今天用angular写table的时候，遇到了一个问题。在ng-repeat中，含有动态的html，而这些html中含有自定义指令。 因为希望实现一个能够复用的table，所以定义了一个指令myStandTable，指令代码大概如下： var myCommon = angular.module("myCommon",[]); myCommon.directive("myStandTable", function () {return {restrict: "A",templateUrl: "app/template/tableTem.html",transclude: false,replace: true,controller: function (...
本文实例讲述了AngularJS使用ng-inlude指令加载页面失败的原因与解决方法。分享给大家供大家参考，具体如下： AngularJS中提供的ng-include指令，很类似于JSP中的<jsp:include>用来将多个子页面合并到同一个父页面中，避免父页面过大，可读性差，不好维护。 父页面parent.html代码如下： <html><head><script src="angular-1.2.2/angular.js"></script><script>function rootController($scope,$rootScope,$injector){$rootScope.n...
本文实例分析了AngularJS使用angular.bootstrap完成模块手动加载的方法。分享给大家供大家参考，具体如下： 之前我们看到使用ng-app指令，可以实现模块的自动加载。现在我们看下，angular中如何手动加载模块。需要使用到angular.bootstrap这个函数。 <html><head><script src="angular.js"></script><script>// 创建moudle1var rootMoudle = angular.module(moudle1, []);rootMoudle.controller("controller1",function($scope){$s...
第一步，首先需要在<ion-content>标签里面加入标签<ion-infinite-scroll ng-if="hasmore" on-infinite="loadMore()" distance="5%"></ion-infinite-scroll> 里面的属性解释， ng-if 值 布尔型，如果为true，则可以触发上拉事件 on-infinite 上拉时触发的事件 distance 列表底部滚动到可触发上拉事件的距离，默认为1% icon 加载时显示的加载图标，默认为 ion-loading-d 第二步：在控制器内书写 $scope.hasmore = true; 定义可触发事...
最近做的项目中用到了angular下上传图片功能，在做的过程中遇到了许多问题，最终都得以解决 angular上传时和普通上传时过程差不多，只不过是要不一些东西转化为angular的东西。 1.ng-file-select,指令angular是没此功能的，其实也是转化成了change事件，不多说，直接上代码 angular.module(myApp) .directive(ngFileSelect, [ $parse, $timeout, function($parse, $timeout) {return function(scope, elem, attr) {var fn = $parse...
前言 本文主要介绍的是在AngularJS中update两次出现$promise属性无法识别的解决方法，下面话不多说，先来看看错误提示，然后再看看解决的办法吧。 一、错误信息如下： ERROR 2015-12-02 14:33:17,653 http-bio-8080-exec-42 o.s.s.r.i.e.InternalErrorExceptionMapper - Unrecognized field "$promise" (class com.inetpsa.fnd.rest.client.ClientRepresentation), not marked as ignorable (6 known properties: "lastName", "add...