打开带有 angularjs 按钮的页面

Opening pages with buttons in angularjs

本文关键字：按钮 angularjs      更新时间：2023-09-26

我试图让一些按钮在单击时显示不同的模板，但我似乎无法让它工作。我正在根据此示例工作：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>

该应用程序.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']);
})();

任何帮助将不胜感激！

首先，看起来你的应用.js应该以以下内容开头：

var app = ons.bootstrap('store', ['onsen'])
app.controller('StoreController', function($scope) {
...
});
...

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

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

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

相关文章：