Cfrgtkky

This is not an interpolation issue. I removed any interpolation in my code and I am still getting the same error.

I am getting this error when when clicking on an ng-click that points to a page reference defined as a .state in app.js. What does this error mean? I can’t find any reference to it via a google search, specifically nextEvent

   // app.js

  .state('tab.clubs', {

      cache: false,

      url: '/clubs',

      views: {

        'tab-clubs': {

          templateUrl: 'templates/tab-clubs.html',

          controller: 'ClubCtrl'

        }

      }

    })

    .state('tab.club-detail', {

      url: '/clubs/:clubID',

      views: {

        'tab-clubs': {

          templateUrl: 'templates/detail-clubs.html',

          controller: 'ClubDetailCtrl'

        }

      }

    })

And the call in my template. NOTE, there is an ng-repeat nested inside another ng-repeat - however I don't think this is causing the problem because everything renders properly with the expected IDs and indexes....and the error ONLY generates when I click on the the <div ng-click="...."> that is inside the nested ng-repeat:

  <div id="club_tabItem_{{club.data[0].clID}}" style="padding:5px;border-bottom:1px solid grey;" class="item-remove-animate item-avatar" ng-repeat="club in clubs">

    <div id="loc_{{club.data[0].clID}}" style="left:15px;">

      <div ng-click="showEvents(club.data[0].clID);">

        <h3>{{club.data[0].clVendor}}

          <!-- <span style="margin-left:15px;">Location: {{club.data[0].clAddress1}}, {{club.data[0].clCity}}</span> -->

          <i style="font-size:25px;float:right;" class="icon ion-android-arrow-dropdown-circle icon-accessory customColor1"></i>

        </h3> 

        <span style="padding-left:30px;">{{club.data[0].clDesc}}</span>

      </div>

      <div id="eventsDiv_{{club.data[0].clID}}" style="width:100%;display:none;margin-top:10px;background-color:lightGrey;">

        <div id="events_{{event.ceID}}" style="width:80%;margin-left:20%;display:inline-block;" ng-repeat="event in club.events">

          <div ng-click="$location.url('/tab/clubs/' + event.ceID)" >

             <div style="float:left;font-size:14px;font-weight:bolder;">{{event.ceName}} ({{event.ceName1}}) </div>

             <div style="float:left;margin-left:15px;">Location: {{club.data[0].clAddress1}}, {{club.data[0].clCity}}</div> 

             <div style="float:left;margin-left:15px;">Next: {{nextEvent(event)}}</div>

              <i style="font-size:25px;" class="icon ion-android-arrow-dropright-circle icon-accessory customColor1"></i>

          </div>

        </div>

      </div>

    </div>

  </div>

In the above case, the call is: ng-click="$location.url('/tab/clubs/1')" - in the controller I have $scope.$location = $location with $location being passed into the controller properly.

As best I can tell, debugging doesn't even make it to the controller of the .state detail-clubs page. The error fires before entering the controller.

More on the error:

ionic.bundle.js:20306 Error: [$parse:ueoe] Unexpected end of expression: nextEvent(club.event[club.eIndex]

http://errors.angularjs.org/1.3.13/$parse/ueoe?p0=nextEvent(club.event%5Bclub.eIndex%5D

    at ionic.bundle.js:8762

    at Parser.consume (ionic.bundle.js:20747)

    at Parser.functionCall (ionic.bundle.js:21022)

    at Parser.primary (ionic.bundle.js:20694)

    at Parser.unary (ionic.bundle.js:20970)

    at Parser.multiplicative (ionic.bundle.js:20953)

    at Parser.additive (ionic.bundle.js:20944)

    at Parser.relational (ionic.bundle.js:20935)

    at Parser.equality (ionic.bundle.js:20926)

    at Parser.logicalAND (ionic.bundle.js:20917)

(anonymous) @ ionic.bundle.js:20306

(anonymous) @ ionic.bundle.js:17256

$broadcast @ ionic.bundle.js:23421

(anonymous) @ ionic.bundle.js:40889

processQueue @ ionic.bundle.js:21888

(anonymous) @ ionic.bundle.js:21904

$eval @ ionic.bundle.js:23100

$digest @ ionic.bundle.js:22916

$apply @ ionic.bundle.js:23205

(anonymous) @ ionic.bundle.js:20063

eventHandler @ ionic.bundle.js:11713

triggerMouseEvent @ ionic.bundle.js:2863

tapClick @ ionic.bundle.js:2852

tapTouchEnd @ ionic.bundle.js:2975

Don't mix AngularJS expressions and interpolation:

<div id="events_{{event.ceID}}" style="width:80%;margin-left:20%;display:inline-block;" ng-repeat="event in club.events">

    ̶<̶d̶i̶v̶ ̶n̶g̶-̶c̶l̶i̶c̶k̶=̶"̶$̶l̶o̶c̶a̶t̶i̶o̶n̶.̶u̶r̶l̶(̶'̶/̶t̶a̶b̶/̶c̶l̶u̶b̶s̶/̶{̶{̶e̶v̶e̶n̶t̶.̶c̶e̶I̶D̶}̶}̶'̶)̶"̶>̶

    <div ng-click="$location.url('/tab/clubs/'+event.ceID)">

       <div style="float:left;font-size:14px;font-weight:bolder;">{{event.ceName}} ({{event.ceName1}}) </div>

       <div style="float:left;margin-left:15px;">Location: {{club.data[0].clAddress1}}, {{club.data[0].clCity}}</div> 

       <div style="float:left;margin-left:15px;">Next: {{nextEvent(event)}}</div>

        <i style="font-size:25px;" class="icon ion-android-arrow-dropright-circle icon-accessory customColor1"></i>

    </div>

</div>

For more information, see Why mixing interpolation and expressions is bad practice.