2016-07-31 54 views
2

我正在試圖讓Mobiscroll與Ionic一起工作,但似乎無法實現它?Mobiscroll和Ionic執行

這是我正在做的。我已經實現jQuery和mobiscroll這樣的:

<!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> 

我有那麼我controllers.js做到了這一點:

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 
    }; 
}); 

最後,在我的start.html做到了這一點:

<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> 

現在,Mobiscroll不顯示,但顯示常規選擇字段!?

我已經在網上搜索了關於這個的教程,但沒有運氣...有沒有人成功地集成了mobiscroll離子或我做這一切都是錯誤的?

希望能幫助和在此先感謝:-)

回答

0

因爲你還沒有注入mobiscroll選擇模塊它是最有可能的。我知道你提到jquery,但我認爲你正在嘗試角實現,因爲你正在創建一個設置對象的範圍。

,這樣就會將解決你的問題,或者至少讓你更近了一步:

angular.module('myApp.controllers', ['mobiscroll-select'])