Question

我已经开始研究IONIC应用程序了。单击按钮，我在从一个页面导航到另一个页面时遇到困难。以下是我到目前为止所做的事情 -

的index.html -

<!DOCTYPE html>
<html>
  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link rel="manifest" href="manifest.json">



    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <script src="lib/ionic/js/angular/angular-resource.min.js"></script>

    <script src="js/ng-cordova.min.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>


    <!-- your app's js -->
    <script src="js/app.js"></script>

    <base href="/">
  </head>
  <body ng-app="starter">
    <div ng-controller="MainCtrl">
      <ion-content class="bg-img has-bottom">
      </ion-content>
        <div class="fixed-outside">      
          <div class="row">
            <div class="col">
              <button ng-click="login_google()" class="button" id="google-btn">Connect with Google</button>
            </div>
          </div> 
          <div class="row">
            <div class="col">
              <button ng-click="login_fb()" class="button" id="fb-btn">Connect with Facebook</button>
            </div>
          </div>
          <div class="row">
            <div class="col">   
                <button class="button button-stable" ng-click="login()" id="login-btn">Login</button>
            </div>
            <div class="col">
              <button ng-click="register()" class="button button-stable" id="reg-btn">Register</button>
            </div>
          </div>
        </div>

  </body>
</html>

现在只关注登录按钮。单击时应该导航到main.html。

app.js -

angular.module('starter', ['ionic','ui.router'])


.config(function($stateProvider, $locationProvider, $urlRouterProvider){
  $urlRouterProvider.when('', '/');
  $stateProvider
      .state('index', {
            cache: false,
            url: '/',
                  templateUrl: "index.html",
                  controller: "MainCtrl"      
      })
      .state('main',{
            cache: false,
            url: '/main',
            templateUrl: 'templates/main.html',
            controller: 'MainController'
      });
      $locationProvider.html5Mode(true);
      $urlRouterProvider.otherwise('/');

})

.controller('MainCtrl', function($scope, $state) {
  $scope.login = function(){
    //console.log("Login clicked!");
    $state.go('main');
    console.log('the state is '+$state.stateName); 
    // window.location = "/main.html";
    // $scope.apply();
  };    
})

.controller('MainController', function($scope, $state) {    
    $scope.message = 'This is student list screen';
});

控制台输出给出 -

状态未定义

在点击按钮的简单导航中，我在文档中找不到任何内容。

Answer 1

您错过了在index.html页面中调用ui-router脚本，这就是您收到该错误消息的原因。

但如果您已经注入ui-router模块

，则无需注入ionic

您还需要添加以下代码来绑定html

<div ui-view></div>

更多详情请点击此处：How to Set Up HelloJS in Ionic Framework with Angular UI Router

按钮ng-单击更改URL但不呈现新视图？

1 个答案: