Ionic / Angular ui-router -a href返回错误的URL /内容-Java 学习之路

我有一个Ionic选项卡菜单，显示4项（下面的代码和codepen只有2项清晰度）和一个“更多”项目，导致进一步的菜单选项显示为离子内容列表 . 它使用Angular ui-router . 我有两个可能相关的问题 .

Issue 1: 起初应用程序似乎工作正常，但当您开始浏览几个链接时（通常在访问"more"之后，选项卡将开始返回错误的URL . 例如：

说明新闻>联系>更多>体育>联系人>新闻>更多 - breaks here, 我看到联系人内容而不是更多内容 .

我已经在每个控制器中添加了一个console.log，在Chrome开发工具控制台中，我可以看到每个标签点击似乎都是额外的事件，例如点击新闻标签表示“新闻”在控制台中出现两次 . 此外，在上面的导航示例中，控制台显示我单击“更多”时启动了联系人控制器 .

总而言之，在对应用程序进行一些点击后，href目标似乎将我发送到了错误的位置，就好像在运行时编辑了代码一样 .

Issue 2: 直到导航如上所述中断的点，后退按钮对于从选项卡启动的页面正常工作，但对于从"more"页面（即从列表中）启动的页面，没有后退按钮 .

对不起，所有这些初学者的问题！

Codepen：http://codepen.io/anon/pen/hBpfa

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 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/app.js"></script>
    </head>
  <body ng-app="schoolApp"  animation="slide-left-right-ios7">

    <ion-nav-bar class="bar-stable nav-title-slide-ios7 bar-positive">
      <ion-nav-back-button class="button-icon icon  ion-ios7-arrow-back">
        Back
      </ion-nav-back-button>
    </ion-nav-bar>

    <ion-nav-view></ion-nav-view>

  <script id="tabs.html" type="text/ng-template">
  <ion-tabs class="tabs-icon-top">

    <ion-tab title="News" icon="icon ion-ios7-paper-outline SS-tab-icon" href="#/tab/news">
      <ion-nav-view></ion-nav-view>
    </ion-tab>

    <ion-tab title="Contact" icon="icon ion-ios7-telephone SS-tab-icon" href="#/tab/contact">
      <ion-nav-view></ion-nav-view>
    </ion-tab>

    <ion-tab title="More" icon="icon ion-navicon-round SS-tab-icon" href="#/tab/more">
      <ion-nav-view></ion-nav-view>
    </ion-tab>

  </ion-tabs>
  </script>

  <script id="more_tab_contents.html" type="text/ng-template">
  <ion-view title="{{title}}">
    <ion-content class="has-header padding">

      <div class="list">
        <a nav-clear class="item item-icon-left" href="#tab/info">
          <i class="icon ion-ios7-information SS-tab-icon"></i>
          Information
        </a>
        <a nav-clear class="item item-icon-left" href="#tab/pictures">
          <i class="icon ion-camera SS-tab-icon"></i>
          Pictures
        </a>
        <a nav-clear class="item item-icon-left" href="#tab/sport">
          <i class="icon ion-ios7-football-outline SS-tab-icon"></i>
          Sports
        </a>
      </div>
    </ion-content>

  </ion-view>
  </script>

  <script id="inside.html" type="text/ng-template">
    <ion-view title="{{title}}">
      <ion-content class="has-header padding">
           <div class="SS_inside_content">
              <h1>{{title}}</h1>

              <ol>
              <li>In faucibus condimentum libero, vel iaculis nibh tristique ac. Nunc vitae urna felis. Praesent lectus ligula, vulputate id dolor at, porttitor pretium nulla. </li>
             <li>In faucibus condimentum libero, vel iaculis nibh tristique ac. Nunc vitae urna felis. Praesent lectus ligula, vulputate id dolor at, porttitor pretium nulla. </li>
             <li>In faucibus condimentum libero, vel iaculis nibh tristique ac. Nunc vitae urna felis. Praesent lectus ligula, vulputate id dolor at, porttitor pretium nulla. </li>
              <li>In faucibus condimentum libero, vel iaculis nibh tristique ac. Nunc vitae urna felis. Praesent lectus ligula, vulputate id dolor at, porttitor pretium nulla. </li>
             <li>In faucibus condimentum libero, vel iaculis nibh tristique ac. Nunc vitae urna felis. Praesent lectus ligula, vulputate id dolor at, porttitor pretium nulla. </li>
             <li>In faucibus condimentum libero, vel iaculis nibh tristique ac. Nunc vitae urna felis. Praesent lectus ligula, vulputate id dolor at, porttitor pretium nulla. </li>
              <li>In faucibus condimentum libero, vel iaculis nibh tristique ac. Nunc vitae urna felis. Praesent lectus ligula, vulputate id dolor at, porttitor pretium nulla. </li>
               </ol>
         </div>
     </ion-content>
    </ion-view>
  </script>

  <script id="" type="text/ng-template">
  </script>

  </body>
</html>

App.js：

var schoolApp = angular.module('schoolApp', ['ionic'])



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


   // setup an abstract state for the tabs directive
    .state('tab', {
      url: "/tab",
      abstract: true,
      templateUrl: "tabs.html"
    })

   .state('tab.news', {
      url: '/news',
      templateUrl: 'inside.html',
      controller: 'newsCtrl'
    })


   .state('tab.contact', {
      url: '/contact',
      templateUrl: 'inside.html',
      controller: 'contactCtrl'
    })



 .state('tab.info', {
      url: '/info',
      templateUrl: 'inside.html',
      controller: 'infoCtrl'
    })


.state('tab.pictures', {
      url: '/pictures',
      templateUrl: 'inside.html',
      controller: 'picturesCtrl'
    })

.state('tab.sport', {
      url: '/sport',
      templateUrl: 'inside.html',
      controller: 'sportCtrl'
    })


.state('tab.more', {
      url: '/more',
      templateUrl: 'more_tab_contents.html',
      controller: 'moreCtrl'
    })

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

});



schoolApp.controller('infoCtrl', function($scope) {
  $scope.title="Information";
  console.log ( 'info' );
})



schoolApp.controller('newsCtrl', function($scope) {
  $scope.title="Latest News";
  console.log ( 'news' );
})



schoolApp.controller('contactCtrl', function($scope) {
  $scope.title="Contacts";
  console.log ( 'contact' );
})



schoolApp.controller('picturesCtrl', function($scope) {
  $scope.title="Pictures";
  console.log ( 'pics' );
})
schoolApp.controller('sportCtrl', function($scope) {
  $scope.title="Sports";
  console.log ( 'sport' );
})

schoolApp.controller('moreCtrl', function($scope) {
  $scope.title="Further content choices";
  console.log ( 'more' );
});

Update

继续与@SjoerdDeWit讨论并查看Ionic codepen示例之后，我已经恢复使用我以前做过的命名视图 . 然而，在我将“更多”内容加载到新闻的选项卡视图之前 - 现在我将所有内容从更多页面和链接到的页面加载到该选项卡的命名视图中 - 我认为这是Ionic的方式打算这样做 . 因此，当您点击/点击“更多”时，您会获得额外的菜单选项，选择它们，并且您仍然在更多选项卡中，它仍处于活动状态 . 它应该是这样的吗？

有一点我注意到了 . 如果我去'更多'，然后'运动'（更多） - 然后去其他选项卡，然后回到更多，我得到运动，然后再点击更多，并获得更多菜单选项 .

每个状态控制器上的登录显示（对于不同的序列而不是相同的想法）：

news named_views.js:96 (Launch of app)
contact named_views.js:100
more named_views.js:104
more > pics named_views.js:114
news named_views.js:96
more > pics named_views.js:114 FIRST TAP OF MORE - REVISIT IT
more named_views.js:104 TAP IT AGAIN

修订了index.html - 只显示了更新

<script id="tabs.html" type="text/ng-template">
  <ion-tabs class="tabs-icon-top">

    <ion-tab title="News" icon="icon ion-ios7-paper-outline SS-tab-icon" ui-sref="tab.news">
        <ion-nav-view name="news-tab"></ion-nav-view>
    </ion-tab>

    <ion-tab title="Contact" icon="icon ion-ios7-telephone SS-tab-icon" ui-sref="tab.contact">
      <ion-nav-view name="contact-tab"></ion-nav-view>
    </ion-tab>

    <ion-tab title="More" icon="icon ion-navicon-round SS-tab-icon" ui-sref="tab.more">
      <ion-nav-view name="more-tab"></ion-nav-view>
    </ion-tab>

  </ion-tabs>
  </script>

  <script id="more_tab_contents.html" type="text/ng-template">
  <ion-view title="{{title}}">
    <ion-content class="has-header padding">

      <div class="list">
        <a nav-clear class="item item-icon-left" ui-sref="tab.info">
          <i class="icon ion-ios7-information SS-tab-icon"></i>
          Information ui-sref
        </a>
        <a nav-clear class="item item-icon-left" ui-sref="tab.pictures">
          <i class="icon ion-camera SS-tab-icon"></i>
          Pictures
        </a>
        <a nav-clear class="item item-icon-left" ui-sref="tab.sport">
          <i class="icon ion-ios7-football-outline SS-tab-icon"></i>
          Sports
        </a>
      </div>
    </ion-content>

  </ion-view>
  </script>

修改javascript：

var schoolApp = angular.module('schoolApp', ['ionic'])



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

   // setup an abstract state for the tabs directive
    .state('tab', {
      url: "/tab",
      abstract: true,
      templateUrl: "tabs.html"
    })


   .state('tab.news', {
      url: '/news',
      views: {
        'news-tab': {
          templateUrl: 'inside.html',
          controller: 'newsCtrl'
        }
      }
    })



   .state('tab.contact', {
      url: '/contact',
      views: {
        'contact-tab': {
          templateUrl: 'inside.html',
          controller: 'contactCtrl'
        }
      }
    })



   .state('tab.more', {
      url: '/more',
      views: {
        'more-tab': {
          templateUrl: 'more_tab_contents.html',
          controller: 'moreCtrl'
        }
      }
    })




 .state('tab.info', {
      url: '/info',
      views: {
        'more-tab': {
          templateUrl: 'inside.html',
          controller: 'infoCtrl'
         }
      }
    })



.state('tab.pictures', {
      url: '/pictures',
      views: {
        'more-tab': {
          templateUrl: 'inside.html',
          controller: 'picturesCtrl'
         }
      }
    })

.state('tab.sport', {
      url: '/sport',
      views: {
        'more-tab': {
          templateUrl: 'inside.html',
          controller: 'sportCtrl'
         }
      }
    });


  $urlRouterProvider.otherwise('/tab/news');

}); // end config




schoolApp.controller('newsCtrl', function($scope) {
  $scope.title="Latest news";
  console.log('news');
})
schoolApp.controller('contactCtrl', function($scope) {
  $scope.title="Contact us";
  console.log('contact');
})
schoolApp.controller('moreCtrl', function($scope) {
  $scope.title="More (tabs overflow)";
  console.log('more');
})

schoolApp.controller('infoCtrl', function($scope) {
  $scope.title="Information";
  console.log('more > info');
})

schoolApp.controller('picturesCtrl', function($scope) {
  $scope.title="pictures";
  console.log('more > pics');
})
schoolApp.controller('sportCtrl', function($scope) {
  $scope.title="Sports";
  console.log('more > sports');
});

2 回答

Angular和Ionic使用UI-Router . 您应该使用ui-sref，然后使用您想要的状态，而不是使用href属性 . 我用Ionic和Angular中正确的路由方式重新制作了页脚标签

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

<ion-tab title="News" icon="icon ion-ios7-paper-outline SS-tab-icon" ui-sref="tab.news">
  <ion-nav-view name="news"></ion-nav-view>
</ion-tab>

<ion-tab title="Contact" icon="icon ion-ios7-telephone SS-tab-icon" ui-sref="tab.contact">
  <ion-nav-view name="contact"></ion-nav-view>
</ion-tab>

<ion-tab title="More" icon="icon ion-navicon-round SS-tab-icon" ui-sref="tab.more">
  <ion-nav-view name="more"></ion-nav-view>
</ion-tab>

您没有指定视图 . 因此，当您点击新闻>联系人联系人被加载到位于离子标签中的新闻离子视图中时，如果您使用名称将其设置为这样并将您的app.js更改为此应该是oke，尽管如果我是m没有错误，后退按钮不再显示，因为选项卡中存在链接

.state('tab.news', {
      url: '/news',
      views: {
                'news': 
            { 
                    templateUrl: 'inside.html',
                    controller: 'newsCtrl', 
            }
        }
    })


   .state('tab.contact', {
      url: '/contact',
      views: {
                'contact': 
            { 
                    templateUrl: 'inside.html',
                    controller: 'contactCtrl',  
            }
      }
    })



 .state('tab.more', {
      url: '/more',
      views: {
                'more': 
            { 
                    templateUrl: 'inside.html',
                    controller: 'infoCtrl', 
            }
      }

}）

回复于 2024-05-02T08:09:14+08:00

1
我已经解决了这些问题（并且这样做有其他问题，但这将是另一个时间）

问题1 - 单击/点击选项卡并获取不正确的内容 . 已修复上方 Update 下方所做的更改

问题2 - 返回导航未出现在某些地方，请参阅：
```
<a nav-clear class="item item-icon-left" href="#tab/info">
  <i class="icon ion-ios7-information SS-tab-icon"></i>
  Information
</a>
```
nav-clear 正在停止按钮，因为它应该 - 我必须从一些示例代码复制'n'粘贴它
回复于 2024-05-02T08:09:14+08:00

Ionic / Angular ui-router -a href返回错误的URL /内容

2 回答

相关问题