javascript - AngularJS 指令实现中的语法错误

Question

我正在尝试通过使用主 app.js 文件中的命令加载 item.list 来更改 ng-click 事件。 item.list 看起来像这样:

$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");'
                }

在我的 index.html 页面上，我有以下设置:

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

我似乎无法让它工作，在加载页面时出现此错误:

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

我是否遗漏了什么，或者我正在尝试非法行为？

Answer 1

您不需要{{}}。

尝试:

ng-click='item.move()'

您的移动值也是文本。它应该是一个函数:

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