Javascript 使用angularjs中的按钮打开页面_Javascript_Angularjs_Angularjs Directive_Onsen Ui

Javascript 使用angularjs中的按钮打开页面

javascript angularjs

Javascript 使用angularjs中的按钮打开页面,javascript,angularjs,angularjs-directive,onsen-ui,Javascript,Angularjs,Angularjs Directive,Onsen Ui,我试图使一些按钮在单击时显示不同的ons模板，但我似乎无法使其工作。我的工作基于以下示例：以下是迄今为止我得到的似乎不想工作的东西： <!doctype html> <html lang="en" ng-app="store"> <head> <meta charset="utf-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <met

我试图使一些按钮在单击时显示不同的ons模板，但我似乎无法使其工作。我的工作基于以下示例：

以下是迄今为止我得到的似乎不想工作的东西：

    <!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应该以如下方式启动：

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块之外定义

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

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