Синтаксическая ошибка в реализации директивы AngularJS

Question

Синтаксическая ошибка в реализации директивы AngularJS

0

Я пытаюсь изменить событие ng-click, загрузив item.list с помощью команды внутри основного файла app.js. Элемент 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}}">

Я что-то упускаю, или это то, что я пытаюсь совершить незаконное действие?

Thassa 29 янв. 2016, в 19:41

Источник

1

ты пробовал без {{}} ?
Johannes Jander 29 янв. 2016, в 17:59

Теги:

javascript

angularjs

4 ответа

0

Я думаю, вам нужно изменить поле 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()"

tdragon 29 янв. 2016, в 16:48

0

Вы должны сделать это так

ng-click="item.move()"

{{ }} используются для "распечатки", поэтому вы item.move() значение, которое возвращается из item.move() в ng-click=""

Stevik 29 янв. 2016, в 16:41

0

Еще одна вещь, которую вы можете сделать, - создать вспомогательную функцию в контроллере:

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

затем в шаблоне передайте ему содержимое функции:

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

Примечание: функция eval не самая лучшая вещь для использования, но это позволит выполнить задание с учетом ваших данных.

Здесь plnkr: http://plnkr.co/edit/pVQaBul6E3nO8oWY5vxS?p=preview

paul trone 29 янв. 2016, в 16:38

Ещё вопросы

Mihail Petkov · Accepted Answer · 2016-01-29T16-17-00.000Z

Вам не нужно {{}}.

Пытаться:

ng-click='item.move()'

Также ваше значение перемещения - текст. Это должна быть функция:

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

Это работоспособное решение, учитывая, что данные в item.move на самом деле являются функцией и могут быть выполнены.
Не думал использовать это как функцию! Спасибо за вашу помощь.