javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 06:57:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fixed #77, scroll support for <content> dir

Browse Source
This commit is contained in:
Max Lynch
2013-11-06 14:38:59 -06:00
parent 88d6a61b0b
commit e783f48f8d
9 changed files with 88 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
js/ext/angular/src/directive/ionicContent.js vendored
View File

@ -18,7 +18,7 @@ angular.module('ionic.ui.content', [])
return {
restrict: 'E',
replace: true,
template: '<div class="content"></div>',
template: '<div class="scroll-content"><div class="scroll"></div></div>',
transclude: true,
compile: function(element, attr, transclude) {
return function($scope, $element, $attr) {
@ -37,7 +37,22 @@ angular.module('ionic.ui.content', [])
if(attr.hasTabs) {
c.addClass('has-tabs');
}
$element.append(transclude($scope));
// If they want plain overflows scrolling, add that as a class
if(attr.overflowScroll === "true") {
c.addClass('overflow-scroll');
} else {
// Otherwise, supercharge this baby!
var sv = new ionic.views.Scroll({
el: $element[0].firstElementChild
});
// Let child scopes access this
$scope.scrollView = sv;
}
var clone = transclude($scope);
angular.element($element[0].firstElementChild).append(clone);
};
}
};

22
js/ext/angular/src/directive/ionicScroll.js vendored
View File

@ -1,22 +0,0 @@
(function(ionic) {
'use strict';
/**
* @description
* The scroll directive lets you enable a content area for
* our custom momentum scrolling area. The benefit to a custom
* scroll area is configurability, and avoidance of the
* buggy -webkit-overflow-scrolling: touch.
*/
angular.module('ionic.ui.scroll', [])
.directive('scroll', function() {
return {
restrict: 'ECA',
replace: true,
transclude: true,
template: '<div class="scroll-content" ng-transclude></div>'
};
});
})(window.ionic);

1
js/ext/angular/src/ionicAngular.js vendored
View File

@ -14,6 +14,7 @@ angular.module('ionic.service', [
angular.module('ionic.ui', [
'ionic.ui.content',
'ionic.ui.scroll',
'ionic.ui.tabs',
'ionic.ui.nav',
'ionic.ui.sideMenu',

33
js/ext/angular/test/scroll.html Normal file
View File

@ -0,0 +1,33 @@
<html ng-app="scrollTest">
<head>
<meta charset="utf-8">
<title>Side Menus</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-touch.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.js"></script>
</head>
<body>
<content has-header="true">
<div ng-controller="ScrollCtrl">
Realllllyyy long content
<div style="height: 2000px; background-color: red;"></div>
</div>
</content>
<script src="../../../../dist/js/ionic.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
<script>
angular.module('scrollTest', ['ionic'])
.controller('ScrollCtrl', function($scope) {
console.log($scope.scrollView);
});
</script>
</body>
</html>