It appears that the issue I am facing is not related to interpolation. Despite removing any instances of interpolation in my code, I am still encountering the same error.
The error occurs when I click on an ng-click directive that points to a page reference defined as a .state in app.js. What could be the significance of this error message? My attempts to search for information about it on Google have been futile, particularly with respect to 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'
}
}
})
The error seems to trigger only when clicking on the <div ng-click="...."> nested within another 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}}
<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 instance, the call is made as
ng-click="$location.url('/tab/clubs/1')"$scope.$location = $location, which ensures that $location is correctly passed into the controller.
Upon inspection, it seems that the error occurs even before reaching the controller of the .state detail-clubs page.
Additional details regarding the error:
ionic.bundle.js:20306 Error: [$parse:ueoe] Unexpected end of expression: nextEvent(club.event[club.eIndex]
...