将现有angularjs应用离子物质之后不能滚动 [英] Cannot scroll after converting existing angularjs app to ionic
问题描述
我有一个现有的angularjs应用程序，它工作正常，直到我将它转换为离子键。我测试了Chrome浏览器的网站，发现我不能再向下滚动看到一个长桌上。
I have an existing angularjs app which was working fine until I converted it to ionic. I tested the website on the chrome browser and discovered that I can no longer scroll down to see a long table.
我所做的唯一的变化是在HTML code;
The only change I made was in the html code;
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=yes, width=device-width">
<title>test-view</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="lib/ionic/js/bower_components/angular-material/angular-material.min.css">
<link rel="stylesheet" href="lib/ionic/js/bower_components/ng-table/dist/ng-table.min.css">
<link rel="stylesheet" href="css/app.css"/>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<!--<script src="../../bower_components/angular/angular.min.js"></script>-->
<!--<script src="../../bower_components/angular-animate/angular-animate.min.js"></script>-->
<script src="lib/ionic/js/bower_components/angular-aria/angular-aria.min.js"></script>
<script src="lib/ionic/js/bower_components/angular-material/angular-material.min.js"></script>
<script src="lib/ionic/js/bower_components/angular-route/angular-route.min.js"></script>
<script src="lib/ionic/js/bower_components/angular-moment/angular-moment.min.js"></script>
<script src="lib/ionic/js/bower_components/angular-google-chart/ng-google-chart.js"></script>
<script src="lib/ionic/js/bower_components/moment/moment.js"></script>
<script src="lib/ionic/js/bower_components/angular-cookies/angular-cookies.js"></script>
<script src="lib/ionic/js/bower_components/ng-table/dist/ng-table.js"></script>
<div ng-include src="'partials/header.html'"></div>
</head>
<body>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers-func.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<div ng-controller="ViewCtrl" class="container">
<table ng-table="tableParams" class="table table-bordered">
<thead>
<tr>
<th>name</th>
<th>symbol</th>
</tr>
<thead>
<tbody>
<tr ng-repeat="vw $data">
<td data-title="'name'" >
{{vw.name}}
</td>
<td data-title="'symbol'">
{{vw.symbol}}
</td>
</table>
</div>
</body>
</html>
如何让code滚动？
How to make the code scrollable?
推荐答案
包装这个标签在你的桌子。
Wrap this tag over your table.
<ion-content class="has-header" overflow-scroll="true">
<!-- table contents here -->
</ion-content>
以上code将使用本机滚动，而不是JS滚动。请注意，它可能无法以较低的Android版本的工作。只要你使用的是Android 4.2及以上，你是相当安全的。
The above code will use native scroll instead of js scroll. Note that it may not work with lower versions of Android. As long as you are using Android 4.2 and above, you are quite safe.
由于要添加HTML部分，我假设有你的HTML的标题。因此，使用类=有头。
Since you are adding a html partial, I assume there is a header on your html. Therefore, use class="has-header".
这篇关于将现有angularjs应用离子物质之后不能滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
