0

I introduced an issue into the next version of my app and for the life of me I can't see what it is.

I have an ng-repeat that lists several options, each option has a button to display the option info in greater detail. Each option has a button with a link like this:

ng-click="$location.url('/tab/clubs/L_1001_1001_1001')"

In my controller I am assigning the imported $location to: $scope.$location = $location ; But the moment I click the link I get the following error:

ionic.bundle.js:20306 Error: [$parse:ueoe] Unexpected end of expression: club. http://errors.angularjs.org/1.3.13/$parse/ueoe?p0=club.

    at ionic.bundle.js:8762
    at Parser.consume (ionic.bundle.js:20747)
    at Parser.identifier (ionic.bundle.js:20778)
    at Parser.fieldAccess (ionic.bundle.js:20975)
    at Parser.primary (ionic.bundle.js:20701)
    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)

How can I trace what is throwing this error? Obviously, its related to club. somehow - but I can't tell what. The error implies I am missing an ending bracket or curly bracket but I ran external tools to check all my syntax and everything looks good.

The above link is called from tab-clubs.html (controller: ClubCtrl) - that entire page renders fine and tracks no issues. The link calls a specific controller/template using the state:

  .state('tab.clubs', {
      cache: true,
      url: '/clubs',
      params: {
        'refreshClubs' : 0,
        'pushAction' : 0,
        'pushSub' : null,
        'pushMsg' : null,
        'pushCode' : null
      },
      views: {
        'tab-clubs': {
          templateUrl: 'templates/tab-clubs.html',
          controller: 'ClubCtrl'

        }
      }
    })
    .state('tab.club-detail', {
      url: '/clubs/:ceID',
      views: {
        'tab-clubs': {
          templateUrl: 'templates/detail-clubs.html',
          controller: 'ClubDetailCtrl'
        }
      }
    })

...and inside ClubDetailCtrl I added some basic console.log("Here") messages just to see if its making into the controller and it appears it is not. So it seems to be choking somewhere between clicking the link and calling the controller.

update:

So I moved the $location.url(...) to a controller function and recoded the template to:

ng-click="goUrl('L_' +event.cID+ '_' +event.clID+ '_' +event.ceID);"

And in the controller now have:

$scope.goUrl = function(id) {
   console.log("A: " +id) ;
   $location.url("/tab/clubs/" +id) ;
   console.log("B: " +id) ;
}

The ng-click is firing and getting into the controller function, both console.log A and B are displaying - but still getting the same error. I then add test console.log() code in the next controller and the tests console log messages never trigger - so its not even making into the controller.

How else can I track this?

rolinger
  • 2,787
  • 1
  • 31
  • 53
  • Are you using double curly brackets (`{{ }}`) inside the `ng-click`? – georgeawg Feb 17 '20 at 04:46
  • @georgeawg - in fact, I am. And I thought of that too so I looked at my previous versions of my app and they are coded the same way and work without issue. The template code is: `ng-click="$location.url('/tab/clubs/L_{{event.cID}}_{{event.clID}}_{event.ceID}}')"` and after rendedered shows as above `('tab/clubs/L_1001_1001_1001')`. I have not updated Ionic or AngularJS between last app version and current app version. – rolinger Feb 17 '20 at 14:30
  • I am still at a loss with this one and can't figure out how to trace this issue. – rolinger Feb 17 '20 at 18:29

1 Answers1

1

ERRONEOUS

ng-click="$location.url('/tab/clubs/L_{{event.cID}}_{{event.clID}}_{event.ceID}}')"

BETTER

ng-click="$location.url('/tab/clubs/L_'+ event.cID +'_'+ event.clID +'_'+ event.ceID)"

For more information, see

UPDATE

Simplify the template by making a controller method and calling the method from your view:

 ng-click="onClick(event)"

 $scope.onClick = function(event) {
     var url = '/tab/clubs/L_'+ event.cID +'_'+ event.clID +'_'+ event.ceID;
     $location.url(url);
 };

This will make the code easier to understand, test, debug, and maintain.

Community
  • 1
  • 1
georgeawg
  • 48,608
  • 13
  • 72
  • 95
  • I changed to this...it renders just as you have it above, but upon clicking the button I am still getting the same error. Is there some trace method I can use to track what/where exactly the error is coming from - or some other method to track this anonymous ueoe error? – rolinger Feb 17 '20 at 14:53