Syntax error in AngularJS directive implementation

Question

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?

Answer 1

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.")
  }
},

Answer 2

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=""

Answer 3

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()"

Answer 4

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