关于Iscroll.js 的滑动和Angular.js路由冲突问题
Iscroll主要应用于app移动端开发。
主要代码:
window.onload=function(){
var myIscroll=new IScroll(".headerNav",{
scrollX:true
});
};
代码执行的效果图:

左右滑动导航,代码可以正常执行。
接下来 加入angular.route
<script type="text/javascript">
var app = angular.module("myCtrl", ['ngRoute']);
app.controller("test", function($scope) {});
app.config(function($routeProvider) {
$routeProvider.when('/a', {
templateUrl: "isTwo.html"
}).when('/b', {
templateUrl: "navOne.html"
}).when('/c', {
templateUrl: "navTwo.html"
}).otherwise({
redirectTo: "/a"
});
});
</script>
加入angular.route后,路由视图切换效果没有。但是Iscroll依然可以滑动,但是理想的效果没有实现。
解决的方法:
<script type="text/javascript">
var myIscroll = new IScroll(".headerNav", {
scrollX: true,
preventDefault:false
});
</script>
给iscroll对象加一个:
preventDefault:false
因为iscroll会阻止默认行为。把他的默认阻止干掉就可以了。
(pc端可以不用加,一般pc端也用不到)
关于Iscroll.js 的滑动和Angular.js路由冲突问题的更多相关文章
- Angular-chart.js 使用说明(基于angular.js工程)
Angular-chart.js是基于Chart.js的angular组件,引入项目后直接操作数据即可. 引用方法: 分别将Chart.js.angular-chart.js.angular-c ...
- jq,js简单实现类似Angular.js数据绑定效果
刚了解了下Angular.js,发现Angular.js绑定数据方面非常方便,套下教程demo: <div ng-app="myApp" ng-controller=&quo ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
- angular.js初探
2015年7月27日 22:26:35 星期一 用在我论坛里的小栗子: 先列出来一级回帖, 点击帖子前边的"查看回复"按钮无刷新的去请求该帖子的所有回复 首先要引用js文件, 我这 ...
- 推荐 15 个 Angular.js 应用扩展指令(参考应用)
几天前我们看到Angular 1.4.0发布了-一个以社团为驱动的发布版本涵盖了400多个GitHub的提交,增加了对特性的提升,比如动画,以及可用性. 官方新闻发布稿 覆盖了绝大部分,这同样值得放于 ...
- Angular.js中的$injector服务
一 .angular中的依赖注入 angular的一个很重要的特性就是依赖注入,可以分开理解这4个字. 1.依赖: angular里面的依赖,有angular默认提供的,也有我们自己添加的.默认提供的 ...
- {{angular.js 使用技巧}} - 实现计算列属性
前端MV*框架现在有很多,其中某些框架有计算列(又叫监控属性),比如:微软推荐的 Knockout.js 和博客园司徒正美的 avalon.js 框架. 本人只使用过 Knockout.js,aval ...
- angular.js之作用域scope'@','=','&'
<!doctype html> <html ng-app='myApp'> <head> </head> <body> <script ...
- Angular.js之服务与自定义服务学习笔记
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- PRML读书笔记——机器学习导论
什么是模式识别(Pattern Recognition)? 按照Bishop的定义,模式识别就是用机器学习的算法从数据中挖掘出有用的pattern. 人们很早就开始学习如何从大量的数据中发现隐藏在背后 ...
- Thinkphp与CI的区别
深入学习一门新技术的最好方法就是看官方文档. ThinkPHP5.0文档: http://www.kancloud.cn/manual/thinkphp5/118003 官方的说辞是: 主要特性 : ...
- Adaline网络识别印刷体数字0到9-java实现
本篇只给出实现的代码,下一篇将讲一讲实现的原理,及其Adline网络中的LMS算法原理. 包含两个类: package com.cgjr.com; import java.security.Diges ...
- hdu3709 Balanced Number 数位DP
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3709 题目大意就是求给定区间内的平衡数的个数 要明白一点:对于一个给定的数,假设其位数为n,那么可以有 ...
- jquery源码 DOM加载
jQuery版本:2.0.3 DOM加载有关的扩展 isReady:DOM是否加载完(内部使用) readyWait:等待多少文件的计数器(内部使用) holdReady():推迟DOM触发 read ...
- 配置网络yum源
有的时候服务器需要下载一些软件,是本地yum源没有的,这时候需要配置网络yum源 #cd /etc/yum.repos.d/ 把这个目录下的配置文件备份,改名:或者是把文件里边的enabled=1的 ...
- 最全DOS的CMD命令,程序员必会
CMD命令:开始->运行->键入cmd或command(在命令行里可以看到系统版本.文件系统版本)1. appwiz.cpl:程序和功能 2. calc:启动计算器 3. certmgr. ...
- Vmware报错:此主机支持IntelVTx 但IntelVTx处于禁用状态
"此主机支持IntelVTx 但IntelVTx处于禁用状态",报错原因:电脑未开启虚拟化 解决方案: 电脑关机(是关机不是重启)--开机,进BIOS --选择 configura ...
- TCP三次握手与四次分手
TCP简介 首先来看看OSI的七层模型: 我们需要知道TCP工作在网络OSI的七层模型中的第四层--Transport层,IP在第三层--Network层,ARP在第二层--Data Link层:在第 ...
- 小K的H5之旅-HTML5与CSS3部分新属性浅见
一.HTML部分 1.HTML5新特点 向下兼容.用户至上.化繁为简.无插件范式.访问通用性.引入语义.引入原生媒体支持.引入可编程内容 2.HTML5标签语法 可以省略的元素:空元素语法的元素{br ...