ng-click event in OnsenUI does not fire on Android simulator

Question

I'm porting iOS PhoneGap project to android.
However, ng-click event in OnsenUI does not fire on Android simulator.
Here is an example code.

module.controller('LCtrl', function($scope) {
    $scope.login = function() {  // doesn't work!!!
       // some process...
    };
    ons.ready(function() {
       // works
    });
});

<ons-navigator var="loginNavigator">
  <ons-page ng-controller="LCtrl" id="loginPage">
    <ons-list>
      <ons-list-item class="list__item ons-list-item-inner" modifier="tappable" ng-click="login()">
        <ons-icon icon="link" size="20px" fixed-width="false"></ons-icon>
      </ons-list-item>
    </ons-list>
  </ons-page>
</ons-navigator>

And also, sliding-menu on OnsenUI doesn't work.

<!doctype html>
<html lang="en" ng-app="app">
<head>
  <meta charset="utf-8">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width"/>

  <link rel="stylesheet" href="lib/onsen/css/onsenui.css">  
  <link rel="stylesheet" href="styles/onsen-css-components.css">
  <link rel="stylesheet" href="styles/app.css"/>
  <link rel="stylesheet" href="css/ext/style.ccs" type="text/css" />
  <link rel="stylesheet" href="css/ext/github.css" type="text/css" />
  <link rel="stylesheet" href="css/ext/widearea.css" type="text/css" />


  <script src="lib/onsen/js/angular/angular.js"></script>    
  <script src="lib/onsen/js/onsenui.js"></script>    

  <script type="text/javascript" src="js/ext/zepto.js"></script>
  <script type="text/javascript" src="js/ext/forcetk.js"></script>
  <script type="text/javascript" src="cordova.js"></script>
  <script type="text/javascript" src="js/ext/mustache.js"></script>
  <script type="text/javascript" src="js/ext/marked.js"></script>
  <script type="text/javascript" src="js/ext/highlight.pack.js"></script>
  <script type="text/javascript" src="js/ext/widearea.js"></script>

  <style>
    .page--menu-page__background {
      background-color: #333;
    }

    .page--menu-page__content {
      color: white;
    }

    .menu-close,
    .menu-close > .toolbar-button {
      color: #999;
    }

    .menu-list,
    .menu-item:first-child,
    .menu-item:last-child,
    .menu-item {
      background-color: transparent;
      background-image: none !important;
      border-color: transparent;
      color: #fff;
    }

    .menu-item {
      padding: 0 0 0 20px;
      line-height: 52px;
      height: 52px;
      text-shadow: rgba(0, 0, 0, 0.4) 0px 1px 0px;
    }

    .menu-item:active {
      background-color: rgba(255, 255, 255, 0.1);
    }

    .menu-notification {
      display: inline-block;
      margin-top: 12px;
      font-size: 14px;
      height: 16px;
      line-height: 16px;
      min-width: 16px;
      font-weight: 600;
    }

    .bottom-menu-list,
    .bottom-menu-item:first-child,
    .bottom-menu-item:last-child,
    .bottom-menu-item {
      border-color: #393939;
      background-color: transparent;
      background-image: none !important;
      color: #ccc;
    }

    .bottom-menu-item:active {
      background-color: rgba(255, 255, 255, 0.1);
    }
  </style>

</head>

<body>

  <ons-sliding-menu
    menu-page="menu.html" main-page="login.html" side="left"
    var="menu" type="reveal" max-slide-distance="260px" swipeable="false">
  </ons-sliding-menu>

</body>
</html>

I have no idea to solve these problems.
If you have any idea, please tell me how to solve them.

Thanks.

Answer 1

Thanks!!
It's a problem in swipeable=false .

<ons-sliding-menu
  menu-page="menu.html" main-page="login.html" side="left"
  var="menu" type="reveal" max-slide-distance="260px" swipeable="true">
</ons-sliding-menu>

But, I couldn't page transition when revealed menu.
For example, page transition doesn't occur when I tapped "Tapped" menu.

<ons-page modifier="menu-page" ng-controller="Tapped">
  <ons-toolbar modifier="transparent"></ons-toolbar>
  <ons-list class="menu-list">
    <ons-list-item class="menu-item" ng-click="menu.setMainPage('tapped.html', {closeMenu: true})">
      Tapped
    </ons-list-item>
  </ons-list>
</ons-page>

Please give me ideas.

ng-click event in OnsenUI does not fire on Android simulator

Question

1 answers

solution1
0 2015-04-13 07:14:11

ng-click event in OnsenUI does not fire on Android simulator

Question

1 answers

solution1 0 2015-04-13 07:14:11

solution1
0 2015-04-13 07:14:11