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

Answer 2

你应该这样做

ng-click="item.move()"

{{ }}用于＆＃34;打印＆＃34;，所以您所做的是从item.move()返回到ng-click=""

的值

Answer 3

我认为您需要将move字段从字符串更改为函数，例如

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

然后，在html中使用

ng-click="item.move()"

Answer 4

您可以做的另一件事是在控制器中创建辅助函数：

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

然后在模板中将函数内容传递给它：

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

注意：eval函数不是最好用的，但这可以在给定数据的情况下完成工作。

这是一个plnkr：http://plnkr.co/edit/pVQaBul6E3nO8oWY5vxS?p=preview

AngularJS指令实现中的语法错误

4 个答案: