Question

点击时我试图让一些按钮显示不同的ons-templates，但我似乎无法让它工作。我的工作基于这个例子：http://onsen.io/guide/overview.html#ons-navigatoroverview

这是我到目前为止所做的事情似乎并不想工作：

    <!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">&uarr;</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">&darr;</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']);

})();

非常感谢任何帮助!!

Answer 1

在第一个中，它看起来你的app.js应该用以下内容开始：

var app = ons.bootstrap('store', ['onsen'])

app.controller('StoreController', function($scope) {
...
});
...

项目列表应定义为StoreController的$ scope变量的属性。否则角度指令无法访问它。

Ons-navigator元素应位于使用StoreController管理的元素块内。我会将“ng-controller ='StoreController as store'”属性移动到body元素。

我遇到的另一个错误是ons-template元素应该在ons-navigator块之外定义。

在angularjs中打开带有按钮的页面

1 个答案: