current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 0 down vote favorite

I'm trying to change an ng-click event by loading an item.list with the command inside my main app.js file. The item.list looks something like this:

$scope.list = [
                {
                    label: 'Controls',
                    icon: 'fa fa-sliders fa-fw 4x',
                    name: 'Controls',
                    link: '#/ctrlPage',
                    move: 'console.log("On control page.")'
                },
                {
                    label: 'Lights',
                    icon: 'fa fa-film fa-fw 4x',
                    name: 'Lights',
                    link: '#/lightPage',
                    move: 'connection.send("control Closer");'
                },
                {
                    label: 'Queue',
                    icon: 'fa fa-users fa-fw 4x',
                    name: 'Queue',
                    link: '#/queuePage',
                    move: 'connection.send("control Closer");'
                },
                {
                    label: 'Settings',
                    icon: 'fa fa-cogs fa-fw 4x',
                    name: 'Settings',
                    link: '#/settingsPage',
                    move: 'connection.send("control Closer");'
                }

On my index.html page, I have this setup:

  <md-list>
    <md-list-item ng-repeat="item in list" md-ink-ripple="#3F51B5" class="pointer">
      <a href='{{item.link}}' ng-click='{{item.move}}'>
        <span aria-label="{{item.label}}" class="{{item.icon}} icon"></span>
        {{item.name}}
      </a>
    </md-list-item>
  </md-list>

I can't seem to get it to work, getting this error upon loading the page:

Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{item.move}}] starting at [{item.move}}].
http://errors.angularjs.org/1.4.8/$parse/syntax?p0=%7B&p1=invalid%20key&p2=2&p3=%7B%7Bitem.move%7D%7D&p4=%7Bitem.move%7D%7D
    at http://localhost:3000/bower_components/angular/angular.js:68:12
    at Object.AST.throwError (http://localhost:3000/bower_components/angular/angular.js:13100:11)
    at Object.AST.object (http://localhost:3000/bower_components/angular/angular.js:13087:16)
    at Object.AST.primary (http://localhost:3000/bower_components/angular/angular.js:12995:22)
    at Object.AST.unary (http://localhost:3000/bower_components/angular/angular.js:12983:19)
    at Object.AST.multiplicative (http://localhost:3000/bower_components/angular/angular.js:12970:21)
    at Object.AST.additive (http://localhost:3000/bower_components/angular/angular.js:12961:21)
    at Object.AST.relational (http://localhost:3000/bower_components/angular/angular.js:12952:21)
    at Object.AST.equality (http://localhost:3000/bower_components/angular/angular.js:12943:21)
    at Object.AST.logicalAND (http://localhost:3000/bower_components/angular/angular.js:12935:21) <a href="{{item.link}}" ng-click="{{item.move}}">

Am I missing something, or is what I'm attempting an illegal action?

share|improve this question
1  
did you try without the {{}}? – Johannes Jander 2 days ago
up vote 3 down vote accepted

You don't need {{}}.

Try:

ng-click='item.move()'

Also your move value is text. It should be a function:

{
  label: 'Controls',
  icon: 'fa fa-sliders fa-fw 4x',
  name: 'Controls',
  link: '#/ctrlPage',
  move: function() {
    console.log("On control page.")
  }
},
share|improve this answer
    
this is a workable solution given the data in item.move is actually a function and can be executed. – paul147 2 days ago
    
Didn't think to use that as a function! Thanks for your help. – Thassa 2 days ago
up vote 0 down vote

You should do it like this

ng-click="item.move()"

{{ }} are used for "printing out", so what you did is you inserted value that is returned from item.move() into ng-click=""

share|improve this answer
up vote 0 down vote

I think you need to change your move field from string to function, like

$scope.list = [{
    label: 'Controls',
    icon: 'fa fa-sliders fa-fw 4x',
    name: 'Controls',
    link: '#/ctrlPage',
    move: function() {
        console.log("On control page.");
    }
}];

and then, in html use

ng-click="item.move()"
share|improve this answer
up vote 0 down vote

Another thing you could do is create a helper function in the controller: 

$scope.executeCode(code) {
    eval(code); 
}

then in the template pass the function contents to it: 

ng-click="executeCode(item.move)"

Note: the eval function isn't the greatest thing to use but this will get the job done given your data.

Here's a plnkr: http://plnkr.co/edit/pVQaBul6E3nO8oWY5vxS?p=preview

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.