jquery - ngRoute 在页面之间随机切换

标签 jquery html css angularjs ionic-framework

我的应用程序在几个小时前运行良好。现在,当我进入一个页面、触发一个事件时,应用程序会返回到主菜单。

我是这样使用 ngRoute 的:

app.js

angular.module('starter', ['ionic', 'ngRoute', 'starter.homeController', 'starter.clientsController', 'starter.jargonController', 'starter.toolsController', 'starter.welcomeController'])

.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/home');

$stateProvider

    .state('home', {
        url: '/home',
        templateUrl: 'templates/home.html',
        controller: 'homeController'
    })
    .state('welcome', {
        url: '/welcome',
        templateUrl: 'templates/welcome.html',
        controller: 'welcomeController',
        css: 'css/welcome.css'
    })

    .state('jargon', {
        url: '/jargon',
        templateUrl: 'templates/jargon.html',
        controller: 'jargonController',
        css: 'css/jarg.css'


    })


    .state('tools', {
        url: '/tools',
        templateUrl: 'templates/tools.html',
        controller: 'toolsController',
        css: 'css/tools.css'
    })

            .state('clients', {
        url: '/clients',
        templateUrl: 'templates/clients.html',
        controller: 'clientsController',
        css: 'css/clients.css'

    });
});

Index.html

        <script src="lib/angular/angular.js"></script>
    <script src="lib/angular-route/angular-route.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.css">
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="js/plugins/ionic.swipecards.js"></script>
    <script src="lib/ngCordova/dist/ng-cordova.js"></script>
    <script src="cordova.js"></script>
    <link href="https://code.jquery.com/jquery-1.10.2.js">
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"> </script>
    <script src="js/app.js"></script>
    <script src="js/controllers/jargonController.js"></script>
    <script src="js/controllers/homeController.js"></script>
    <script src="js/controllers/toolsController.js"></script>
    <script src="js/controllers/welcomeController.js"></script>
    <script src="js/controllers/clientsController.js"></script>
    <link href="css/jarg.css" rel="stylesheet" />
    <link href="css/welcome.css" rel="stylesheet" />
    <link href="css/tools.css" rel="stylesheet" />
   <link href="css/home.css" rel="stylesheet"  />
   <link href="css/clients.css" rel="stylesheet"/>
<link href="//code.ionicframework.com/nightly/css/ionic.css" `rel="stylesheet">`
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="http://code.ionicframework.com/collide/0.0.4/collide.js"></script>
<script src="http://www.loringdodge.com/files/ionic.tdcards2.js"></script>
<script src="lib/angular-touch/angular-touch.js"></script>
<script src="lib/angular-animate/angular-animate.js"></script>

Welcome.html

<ion-header-bar class="bar bar-header bar-calm">
    <h1 class="tit">Bienvenue!</h1>
      <fab-button class="button icon ion-home pull-right" id="button" ui-sref="home"></fab-button>
</ion-header-bar>
<div class="item" href="#/welcome"></div>
<ion-content ng-controller="welcomeController" style="margin-top: 25px">
        <div class="contenu1">
          <p>Salut, Welcome, Bienvenue chez <div class="jargon-item"><a href="#" ng-model="collapsed1" ng-click="collapsed1=!collapsed1">R2A</a></p>
          <div ><font class="boxed" ng-show="collapsed1">Rhone-Alpes Auvergne</font></div></div>
      <p>Nous sommes ton equipe de Welcomers, nous allons t'accompagner pour ta première journée.</p>
        </div>
    </ion-scroll>
</ion-content>
<ion-footer-bar class="bar">
  <img src="img/Imag.png" class="test2" />
  <img src="img/Test3.png" class="test"/>
</ion-footer>

欢迎 Controller :

angular.module('starter.welcomeController', ['ionic'])
.controller('welcomeController', function ($scope) {
});

所以问题是,当我点击 R2A 时,collapsed 出现了,但随后页面返回到/home。 谁能帮帮我?

最佳答案

<a href="#" ng-model="collapsed1" ng-click="collapsed1=!collapsed1">R2A</a>

anchor 标签包含 href 作为 '#' 被 Angular 路由器拦截。您可以将 href 更改为 javascript:void(0) 或使用按钮代替 anchor 来切换 View 内容。

关于jquery - ngRoute 在页面之间随机切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36597397/

相关文章:

javascript - 向我的向导步骤 Jquery 代码添加第三步

javascript - Jquery UI可拖动改变其他div的大小

javascript - 带有CSS转换的 slider 中的无限循环

jquery - 更改具有类的下一个 div 的 css

html - 将苹果图标添加到网站

javascript - 如何使每次点击(单个按钮)使标题的内容发生变化?

javascript - WebRTC 适用于 Chrome 但不适用于 Firefox

css - 如何为 Ionic 中的每个事件选项卡设置不同的颜色

html - 如何使此 html 响应

javascript - 通过点击菜单打开和关闭不同的div