0
我試圖讓一些按鈕顯示不同的ons-templates單擊時，但我似乎無法使其工作。我正在基於關閉此例如：http://onsen.io/guide/overview.html#ons-navigatoroverview在angularjs中打開按鈕的頁面
這是我走到這一步，只是似乎不希望工作：
<!doctype html>
<html lang="en" ng-app="store">
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<title>Launder</title>
<link rel="stylesheet" href="lib/onsen/css/onsenui.css">
<link rel="stylesheet" href="styles/app.css"/>
<link rel="stylesheet" href="styles/onsen-css-components-blue-basic-theme.css">
<script src="lib/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script>
ons.ready(function() {
});
</script>
<script>
var options = {
animation: 'slide', // What animation to use
onTransitionEnd: function() {} // Called when finishing transition animation
};
myNavigator.pushPage("page2.html", options);
</script>
<script src="//code.angularjs.org/X.Y.Z/angular-touch.js"></script>
</head>
<body class="container">
<ons-navigator title="Navigator" var="myNavigator">
<ons-page ng-controller="StoreController as store">
<ons-toolbar>
<div class="navigation-bar">
<div class="navigation-bar__left">
<span class="toolbar-button--quiet navigation-bar__line-height">
<i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>
</span>
</div>
<div class="navigation-bar__center">
{{store.currentProduct.item}}
</div>
<div class="navigation-bar__right">
<span class="toolbar-button--quiet navigation-bar__line-height">Label</span>
</div>
</div>
</ons-toolbar>
<div id="main" style="margin-left:auto; margin-right:auto; width:auto;">
<div id="sub_main" ng-swipe-left="store.nextProduct()" ng-swipe-right="store.prevProduct()" style="width:100%">
<button class="button button--outline" style="position: absolute;top: 55px;left: 10px;padding: 100px 15px 100px 15px;" ng-click="count = count + 1" ng-init="count=0">↑</button>
<center><img class="item_image" ng-src="{{store.currentProduct.images}}"/></center>
<button class="button button--outline" style="position: absolute;top: 55px;right: 10px;padding: 100px 15px 100px 15px;" ng-click="count = count - 1" ng-init="count=0">↓</button>
</div>
<div style="clear:both;"></div>
<!--<p class="item-title">{{store.currentProduct.description}}</p>-->
<br>
<center><input type="number" class="item-title counter" value="{{count}}" min="0" max="100"></input></center>
<br><br>
<div style="margin:0 auto; width:200px;"><button class="button" modifier="chevron" onclick="myNavigator.pushPage('page2.html', { animation : 'slide' })">Add to laundry basket</button>
<br><br>
<button class="button button--outline" style="position: absolute;bottom: 10px;left: 10px;" ng-click="store.prevProduct()">Back</button>
<button class="button button--outline" style="position: absolute;bottom: 10px;right: 10px;" ng-click="store.nextProduct()">Next</button>
</div>
</ons-page>
<ons-template id="page2.html">
<ons-page>
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">Sign up</div>
</ons-toolbar>
<div class="formarea">
<div class="form-row">
<input type="text" class="text-input--underbar width-half" placeholder="First" value="">
<input type="text" class="text-input--underbar width-half" placeholder="Last" value="" style="border-width-left: 1px">
</div>
<div class="form-row">
<input type="text" class="text-input--underbar width-full" placeholder="Email" value="">
</div>
<div class="form-row">
<input type="password" class="text-input--underbar width-full" placeholder="Password" value="">
</div>
<div class="lucent">
<p class="note">Password - 6 characters or more</p>
</div>
<div class="vspc form-row">
<ons-button modifier="large--cta">Sign up</ons-button>
</div>
</div>
</ons-page>
</ons-template>
</ons-navigator>
</body>
</html>
的app.js看起來是這樣的：
(function() {
ons.bootstrap();
var app = angular.module('store', []);
app.controller('StoreController', function(){
var productIndex = 0;
this.currentProduct = items[productIndex];
this.nextProduct = function() {
productIndex = productIndex+1;
this.currentProduct = items[productIndex];
};
this.prevProduct = function() {
productIndex = productIndex-1;
this.currentProduct = items[productIndex];
};
});
var items = [
{ item: 'Top', number: 2, images: 'shirt_icon.jpeg', description: 'T-shirts, undershirts, singlets, etc.' },
{ item: 'Bottom', number: 5, images: 'pants_icon.jpg', description: 'Jeans, shorts, pants, etc.' },
{ item: 'Underwear', number: 3, images: 'underwear_icon.jpg', description: 'Undies, G-strings, etc.' },
];
var swiper = angular.module('swiper', ['ngTouch']);
})();
任何幫助將不勝感激！