Question

我有一个动画背景，我想继续坚持各种状态。这意味着如果我从状态切换，后面的背景应该保持不变（只有状态的内容在移动）。

我在以下问题中使用了UI路由器，并尝试过这种方法（不起作用）：

abstract.html

<ion-view class="content-back">

<!-- animated background -->
<div id="galaxy">
  <div class="bg"></div>
  <div class="stars-back"></div>
  <div class="stars-middle"></div>
  <div class="stars-front"></div>
  <div class="bg center"></div>
</div>    

<ion-nav-view name="menuContent"></ion-nav-view>

app.js

angular.module('starter', [
  'ionic', 
  'starter.controllers', 
  'starter.services'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleLightContent();
    }
  });
})

和状态配置部分

.config(function($stateProvider, $urlRouterProvider) {

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider


   .state('abstract', {
      url: '/abstract',
      abstract: true,
      templateUrl: 'templates/abstract.html',
   })

   .state('tab.abstract', {
      url: '/dash',
     views: {
       'menuContent': {
          templateUrl: 'templates/tab-dash.html',
          controller: 'DashCtrl'
        }
      }
   })



  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/dash');

});

Answer 1

如果我们想要一个抽象状态（名为 'abstract' ） - 它的每个孩子 - 必须通知UI-Router这样的状态将成为父母：< / p>

.state('dash', {
    parent: 'abstract'
    url: '/dash',
    templateUrl: 'templates/tab-dash.html',
    controller: 'DashCtrl'
})

我们使用 parent: 'abstract' 表示法，其他选项可能是将其嵌入州名.state('abstract.dash', {

现在，子状态将被注入到父视图模板中，因此它必须包含目标 ui-view=""

<ion-view class="content-back">

    <!-- animated background -->
    <div id="galaxy">
    <div class="bg"></div>
    <div class="stars-back"></div>
    <div class="stars-middle"></div>
    <div class="stars-front"></div>
    <div class="bg center"></div>

     // e.g. here
     <div ui-view=""></div> // placeholder for child state

    </div>    
</ion-view>

以上内容是关于UI-Router状态嵌套：Nested States and Nested Views

Answer 2

尝试下面的代码段。＆＃34; templates / abstract.html＆＃34;此模板将在后台和＆＃34; templates / tab-dash2.html＆＃34;，＆＃34; templates / tab-dash2.html＆＃34;将作为背景的一部分加载。你无法访问＆＃34; / abstract＆＃34;直接的网址。您可以使用＆＃34; / abstract / dash1＆＃34;，＆＃34; / abstract / dash2＆＃34;访问选项卡。网址＆＃39; S。

＆＃13;

.config(function($stateProvider, $urlRouterProvider) {

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider


   .state('abstract', {
      url: '/abstract',
      abstract: true,
      templateUrl: 'templates/abstract.html',
   })

   .state('abstract.tab1', {
      url: '/dash1',
     views: {
       'menuContent': {
          templateUrl: 'templates/tab-dash1.html',
          controller: 'DashCtrl1'
        }
      }
   }).state('abstract.tab2', {
      url: '/dash2',
     views: {
       'menuContent': {
          templateUrl: 'templates/tab-dash2.html',
          controller: 'DashCtrl2'
        }
      }
   })




  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/dash');

});

＆＃13;

Answer 3

与此Q＆amp;答：ionic routing issue, shows blank page

我有taken its original plunker并调整了that to our needs HERE

让我们拥有这些状态：

  .state('app', {
  //url: "/app",
  abstract: true,
  templateUrl: "tpl.tabs.html",
  controller: 'AppCtrl'
})
.state('home', {
    parent: 'app',
    url: "/app",
    ...
  })
.state('menu', {
    parent: 'app',
    url: "/menu",
    ...
})

他们已经使用抽象状态＆＃39; app＆＃39;使用此模板＆＃34; tpl.tabs.html＆＃34;：

<ion-tabs class="tabs-icon-top">

  <ion-tab title="Home" icon="icon ion-home" href="#/app">
    <ion-nav-view name="home"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Dash" icon="icon ion-person" href="#/dash">
    <ion-nav-view name=""></ion-nav-view>
  </ion-tab>

  <ion-tab title="Menu" icon="icon ion-person" href="#/menu">
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-tab> 

</ion-tabs>

已经为我们的新州准备好了：

.state('abstract', {
  parent: 'app',
  abstract: true,
  templateUrl: 'templates/abstract.html',
})
.state('dash', {
    parent: 'abstract',
    url: '/dash',
    templateUrl: 'templates/tab-dash.html',
    controller: 'DashCtrl'
})

正如我们所看到的，不仅是＆＃39;破坏＆＃39;有父母＆＃39;抽象＆＃39; - 它还有父母＆＃39; app＆＃39; （它可能只是深层次结构）

这是父母＆＃39;摘要＆＃39;含量：

<ion-view class="content-back">

    <!-- animated background -->
    <div id="galaxy">
    <div class="bg"></div>
    <div class="stars-back"></div>
    <div class="stars-middle"></div>
    <div class="stars-front"></div>
    <div class="bg center"></div>

    <ion-nav-view name=""></ion-nav-view>
    </div>

</ion-view>

在action here

中查看

如何在AngularJS中将抽象状态设置为背景

3 个答案: