Menu
I am trying to get Mobiscroll to work with Ionic but can't seem to make it happen?
Here is what I am trying to do. I have implemented jquery and mobiscroll like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/mobiscroll.custom-2.14.4.min.css" rel="stylesheet" type="text/css" />
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/jquery js -->
<script src="lib/jquery/jquery-1.11.3.js"></script>
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/mobiscroll.custom-2.14.4.min.js"></script>
</head>
<body ng-app="myApp">
<ion-nav-view></ion-nav-view>
</body>
</html>
I have then in my controllers.js done this:
angular.module('myApp.controllers', [])
.controller('mobiCtrl', function ($scope) { // create controller for the module
// create function which calculates the age given the birthday as a datetime object
$scope.settings = {
theme: 'ios',
display: 'bottom',
group: true
};
});
And finally in my start.html done this:
<ion-view view-title="Start">
<ion-content ng-controller="MyController">
<div ng-controller="mobiCtrl">
<select ng-model="myselect" mobiscroll-select="settings">
<optgroup label="A">
<option value="Alan">Alan</option>
<option value="Anderson">Anderson</option>
</optgroup>
<optgroup label="E">
<option value="Eva">Eva</option>
<option value="Esther">Esther</option>
</optgroup>
<optgroup label="M">
<option value="Michael">Michael</option>
<option value="Margared">Margared</option>
</optgroup>
</select>
</div>
</ion-content>
</ion-view>
Now, Mobiscroll is not showing but and regular select field is shown!?
I have searched the net for an tutorial on this, but with no luck... Has anyone successfully integrated mobiscroll with ionic or am doing this all wrong?
255
It is most likely because you haven't injected the mobiscroll select module. I know that you mention jquery but I think you're trying the angular implementation since you're creating a settings object on the scope.
This will either solve your problem or at least get you a step closer:
angular.module('myApp.controllers', ['mobiscroll-select'])
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
