Ion-tab, ion-item, and links

mmilligan · August 14, 2014, 5:41pm

My links in my ion-list/ion-items do not work in either the emulate or on my iPhone. After exploring the forums, I have noticed this seems to be a common issue with a simple solution. However, I am nesting my ion-lists inside of ion-tabs. I tried removing above my list just to see if my links would work but all I get is a disabled infinite scroll with unusable links.

I have compared my code with the Getting Started code, but I wasn’t able to find any differences.

Here’s my tab code

<ion-tabs class="tabs-stable">

  <!-- Sunday Tab -->
  <ion-tab title="Sunday" href="#/tab/sunday">
    <ion-nav-view name="tab-sunday"></ion-nav-view>
  </ion-tab>


  <!-- Monday Tab -->
  <ion-tab title="Monday" href="#/tab/monday">
    <ion-nav-view name="tab-monday"></ion-nav-view>
  </ion-tab>


  <!-- Tuesday Tab -->
  <ion-tab title="Tuesday" href="#/tab/tuesday">
    <ion-nav-view name="tab-tuesday"></ion-nav-view>
  </ion-tab>


</ion-tabs>

Here’s one of my tab detail pages

<ion-view title="Sunday">

    <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" style="color:#fff;" ng-click="showMenu()">
        </button>
    </ion-nav-buttons>
    
    <ion-content class="has-header">
        <ion-list>
            <ion-item ng-repeat="session in sessions" href="#/tab/sunday-detail/{{session.id}}">
                {{session.name}}
              </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

Any help is greatly appreciated. Thanks!

mhartington · August 14, 2014, 7:18pm

Can you throw this into a codepen?

mmilligan · August 14, 2014, 8:05pm

I’m using multiple HTML files for my tabs, so I don’t think I’ll be able to duplicate in a codepen. I can give you my files through GitHub if that will help.

mhartington · August 14, 2014, 8:13pm

Either that or use plunker

http://plnkr.co/

mmilligan · August 14, 2014, 9:28pm

Here is my GitHub

My tabs HTML files are under the templates folder.

mmilligan · August 18, 2014, 5:59pm

Does anyone have a solution or work-around for my issue? I’m at a complete lost.

mhartington · August 18, 2014, 11:45pm

Hey so I’m checking out your project and right now the only issue I can see is how things are being loaded. At first you were loading content from an AWS server, but the content wasn’t loading. Then when I went to load content from the local json file (which I assumed were the ones on the server) things loaded.

What exactly is the issue you have?

mmilligan · August 19, 2014, 1:43pm

I have a list set with links to a detail page. When I test on a browser I am able to get to the detail page, but when I test on my iOS emulator or device, the list with content would load but the links were disabled. I have built out my app so I can have both tabs and a side menu working simultaneously, with the help of microbabini.

Am I over complicating things? Should I just stick with either the side menu or tabs rather than trying to use both?

mhartington · August 19, 2014, 2:16pm

It may just be the best thing to stick with one. This way things got get overly complicated and you can simplify your approach

mmilligan · August 19, 2014, 3:28pm

OK, I just downloaded a new Ionic “starter” app with just the side menu and replaced their list with mine. However, I’m still unable to get the links to work in the emulator. I have created a new repo here.

mmilligan · August 20, 2014, 2:01pm

So after some debugging, I found out this link: href="#/app/session-detail/{{session.id}}" inside the ion-list tag seems to be the problem. I have linked to other pages (something that doesn’t require the “{{ }}”) for testing and it works in the emulator.

What gets me is that I’m using the exact same structure as the “sidemenu” template, but not getting the same results.

mhartington · August 20, 2014, 2:10pm

Hey there, so lets try this. Can you try using ng-href? This way angular will process the link.

Or try using ui-routers methon

ui-sref="state.nested({sessionsId: session.id })"

Also, are you getting any errors in your console?

mmilligan · August 20, 2014, 2:30pm

Huh, I’m get a laundry list of errors. Not sure where to start lol

Aug 20 10:27:09 Bryans-Mac-mini.local backboardd[21868] : HID: The ‘Rate Controlled’ connection ‘backboardd’ access to protected services is granted.
Aug 20 10:27:09 Bryans-Mac-mini.local locationd[21871] : NBB-Could not get UDID for stable refill timing, falling back on random
Aug 20 10:27:11 Bryans-Mac-mini.local securityd[21888] : unable to access hwaes key
Aug 20 10:27:12 Bryans-Mac-mini.local backboardd[21868] : HID: The ‘Passive’ connection ‘SpringBoard’ access to protected services is granted.
Aug 20 10:27:12 Bryans-Mac-mini.local backboardd[21868] : HID: The ‘Rate Controlled’ connection ‘SpringBoard’ access to protected services is granted.
Aug 20 10:27:12 Bryans-Mac-mini.local SpringBoard[21878] : *** error reading settings archive file: <SBRootSettings: /Users/bbeswick/Library/Application Support/iPhone Simulator/7.1/Documents/com.apple.springboard.settings/RootSettings.plist>
Aug 20 10:27:12 Bryans-Mac-mini.local SpringBoard[21878] : *** error reading settings archive file: <SBRootSettings: /Users/bbeswick/Library/Application Support/iPhone Simulator/7.1/Documents/com.apple.springboard.settings/RootSettings.previous.plist>
Aug 20 10:27:12 Bryans-Mac-mini.local SpringBoard[21878] : libMobileGestalt MobileGestalt.c:200: string SBNonDefaultSystemAppTag is not a valid gestalt question
Aug 20 10:27:12 Bryans-Mac-mini.local SpringBoard[21878] : libMobileGestalt MobileGestalt.c:200: string hidden is not a valid gestalt question
Aug 20 10:27:12 Bryans-Mac-mini.local SpringBoard[21878] : libMobileGestalt MobileGestalt.c:835: still-camera is static and will never generate a notification
Aug 20 10:27:12 Bryans-Mac-mini.local SpringBoard[21878] : libMobileGestalt MobileGestalt.c:835: stand-alone-contacts is static and will never generate a notification
Aug 20 10:27:13 Bryans-Mac-mini.local /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator7.1.sdk/usr/libexec/lsd[21882] : Need to synchronize with MobileInstallation
Aug 20 10:27:14 Bryans-Mac-mini.local mediaremoted[21889] : Property list invalid for format: 200 (property lists cannot contain NULL)
Aug 20 10:27:14 Bryans-Mac-mini.local SpringBoard[21878] : Normal message received by listener connection. Ignoring.
Aug 20 10:27:15 Bryans-Mac-mini.local SpringBoard[21878] : libMobileGestalt MobileGestalt.c:835: still-camera is static and will never generate a notification
Aug 20 10:27:15 Bryans-Mac-mini.local SpringBoard[21878] : libMobileGestalt MobileGestalt.c:835: stand-alone-contacts is static and will never generate a notification
Aug 20 10:27:16 Bryans-Mac-mini.local SpringBoard[21878] : Normal message received by listener connection. Ignoring.
Aug 20 10:27:16 Bryans-Mac-mini.local locationd[21871] : Client ‘/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator7.1.sdk/System/Library/CoreServices/SpringBoard.app/SpringBoard’ is attempting to masquerade as uninstalled app with effective bundle identifier 'com.apple.reminders’
Aug 20 10:27:17 Bryans-Mac-mini.local backboardd[21868] : HID: The ‘Passive’ connection ‘testSideMenu’ access to protected services is denied.
Aug 20 10:27:26 Bryans-Mac-mini.local SpringBoard[21878] : TASK-ASSERT: cfurlcache - ProcessCacheTask - FAILED to get task-assertion, going commando with 1 items to process.

mhartington · August 20, 2014, 2:31pm

Hmm, this is in xcode huh? Can you load it in your browser of just open the javascript console?

mmilligan · August 20, 2014, 2:40pm

Sure. Here is the JS error I get when I load the page:

“NetworkError: 404 Not Found - http://localhost:8100/cordova.js”

When I click on one of my links, I get this error:

Error: [$injector:unpr] Unknown provider: SessionsInfoProvider <- SessionsInfo
http://errors.angularjs.org/1.2.17/$injector/unpr?p0=SessionsInfoProvider%20%3C-%20SessionsInfo
minErr/<@http://localhost:8100/lib/ionic/js/ionic.bundle.js:7942:5
createInjector/providerCache.$injector<@http://localhost:8100/lib/ionic/js/ionic.bundle.js:11599:13
getService@http://localhost:8100/lib/ionic/js/ionic.bundle.js:11726:11
createInjector/instanceCache.$injector<@http://localhost:8100/lib/ionic/js/ionic.bundle.js:11604:17
getService@http://localhost:8100/lib/ionic/js/ionic.bundle.js:11726:11
invoke@http://localhost:8100/lib/ionic/js/ionic.bundle.js:11753:1
instantiate@http://localhost:8100/lib/ionic/js/ionic.bundle.js:11774:7
$ControllerProvider/this.$get</<@http://localhost:8100/lib/ionic/js/ionic.bundle.js:15028:7
updateView@http://localhost:8100/lib/ionic/js/ionic.bundle.js:42027:17
directive.compile/</eventHook@http://localhost:8100/lib/ionic/js/ionic.bundle.js:41974:17
$RootScopeProvider/this.$get</Scope.prototype.$broadcast@http://localhost:8100/lib/ionic/js/ionic.bundle.js:20661:15
transitionTo/$state.transition<@http://localhost:8100/lib/ionic/js/ionic.bundle.js:33938:11
qFactory/defer/deferred.promise.then/wrappedCallback@http://localhost:8100/lib/ionic/js/ionic.bundle.js:19272:15
qFactory/ref/<.then/<@http://localhost:8100/lib/ionic/js/ionic.bundle.js:19358:11
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://localhost:8100/lib/ionic/js/ionic.bundle.js:20382:9
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost:8100/lib/ionic/js/ionic.bundle.js:20194:15
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:8100/lib/ionic/js/ionic.bundle.js:20486:13
done@http://localhost:8100/lib/ionic/js/ionic.bundle.js:16098:34
completeRequest@http://localhost:8100/lib/ionic/js/ionic.bundle.js:16303:7
createHttpBackend/</xhr.onreadystatechange@http://localhost:8100/lib/ionic/js/ionic.bundle.js:16246:1
consoleLog/<()ionic.bundle.js (line 17763)$ExceptionHandlerProvider/this.$get</<(exception=Error: [$injector:unpr] Unknown provider: SessionsInfoProvider <- SessionsInfo
http://errors.angularjs.org/1.2.17/$injector/unpr?p0=SessionsInfoProvider%20%3C-%20SessionsInfo
return new Error(message);, cause=undefined)ionic.bundle.js (line 15110)$RootScopeProvider/this.$get</Scope.prototype.$broadcast()ionic.bundle.js (line 20663)transitionTo/$state.transition<()ionic.bundle.js (line 33938)qFactory/defer/deferred.promise.then/wrappedCallback(value=Object { resolve={...},  globals={...},  menuContent@app={...},  more...})ionic.bundle.js (line 19272)qFactory/ref/<.then/<()ionic.bundle.js (line 19358)$RootScopeProvider/this.$get</Scope.prototype.$eval(expr=function(), locals=undefined)ionic.bundle.js (line 20382)$RootScopeProvider/this.$get</Scope.prototype.$digest()ionic.bundle.js (line 20194)$RootScopeProvider/this.$get</Scope.prototype.$apply(expr=undefined)ionic.bundle.js (line 20486)done(status=200, response="<ion-view title="Session...n-content>\n\n</ion-view>", headersString="Accept-Ranges: bytes\r\nDa...\r\nContent-Length: 474\r\n", statusText="OK")ionic.bundle.js (line 16098)completeRequest(callback=done(status, response, headersString, statusText), status=200, response="<ion-view title="Session...n-content>\n\n</ion-view>", headersString="Accept-Ranges: bytes\r\nDa...\r\nContent-Length: 474\r\n", statusText="OK")ionic.bundle.js (line 16303)createHttpBackend/</xhr.onreadystatechange()ionic.bundle.js (line 16246)
return logFn.apply(console, args);ionic.bundle.js (line 17763)

mhartington · August 20, 2014, 2:47pm

Alright, now we’re getting somewhere!

SessionsInfoProvider probably isn’t getting injected into your controller.

mmilligan · August 20, 2014, 6:19pm

Hmmm…I don’t have anything in my code called SessionsInfoProvider but I do have SessionsInfo being declared in my “SessionDetailCtrl” controller:

.controller('SessionDetailCtrl', ['$scope', '$stateParams', 'SessionsInfo',
    function($scope, $stateParams, SessionsInfo, $ionicNavBarDelegate)
    {    
        $scope.session = SessionsInfo.get($stateParams.sessionId);
        
        $scope.goBack = function() {
            $ionicNavBarDelegate.back();
            };
    }
])

I removed all the code inside this controller so I have this now:

.controller('SessionDetailCtrl', function($scope, $stateParams) {
})

No errors in my console but still doesn’t work in the emulator

mhartington · August 20, 2014, 6:56pm

So I downloaded the project again, it found the issue

$scope.session = SessionsInfo.get($stateParams.sessionId);

All this logic should be moved to a service.

github.com

ionic-team/ionic-starter-tabs/blob/master/js/services.js

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

.factory('Chats', function() {
  // Might use a resource here that returns a JSON array

  // Some fake testing data
  var chats = [{
    id: 0,
    name: 'Ben Sparrow',
    lastText: 'You on your way?',
    face: 'img/ben.png'
  }, {
    id: 1,
    name: 'Max Lynx',
    lastText: 'Hey, it\'s me',
    face: 'img/max.png'
  }, {
    id: 2,
    name: 'Adam Bradleyson',
    lastText: 'I should buy a boat',

This file has been truncated. show original

mmilligan · August 20, 2014, 8:23pm

I’m a little confused on why this JS file is necessary. I’m using the sidemenu template while it looks like this services.js file is from the tabs template.

mmilligan · August 21, 2014, 3:48pm

UPDATE: I removed SessionsInfo from my ‘SessionsDetailCtrl’ controller, so now I just have this

.controller('SessionDetailCtrl', function($scope, $stateParams) {
})

I just want to have my links to work in the emulator for right now (one step at a time).

I tried both ng-href and ui-sref; neither of those worked. Also, the errors I was getting yesterday are no longer there.