Директива AngularJS, передающая динамический пользовательский интерфейс - PullRequest
Новая
       18

Директива AngularJS, передающая динамический пользовательский интерфейс

0 голосов
/ 16 апреля 2019

Я использую старый AngularJS 1.5.11 в большом проекте и пытаюсь очистить свои шаблоны с помощью директив.

У меня есть директива кнопки редактирования, в которой я хотел бы пройтиUI-SREF, но когда я получаю, я получаю ошибку 

Error: [$parse:syntax] Syntax Error: Token '}' not a primary expression at column 6 of the expression [{id: }] starting at [}].

Вот моя директива 

editButton = ->

  return {
    restrict: 'EA',
    scope: {
      sref: "@"
    },
    template: '
    sref = {{sref}}
      <button id="edit-btn"
              class="mds__button -blue"
              ui-sref={{sref}}>
        <i class="fa fa-edit"></i> Edit
      </button>
    '
  }

angular
  .module('myApp')
  .directive('editButton', editButton)

И вот как я называю это 

<edit-button sref="job_edit({id: {{job.id}}})" />

В моем шаблоне я отображаю sref, и он правильно распечатан, но кнопке не нравится ui-sref.

Обновление

Я заработал, но было бы неплохо реорганизовать его, поэтому я передаю атрибут job_edit ({id: job.id}), и он работает.

Директива; 

editButton = ->

  return {
    restrict: 'EA',
    scope: {
      model: "@"
      item: "="
    },
    template: '
      <button id="edit-btn"
              class="mds__button -blue"
              ui-sref="{{model}}_edit({id: item.id})">
        <i class="fa fa-edit"></i> Edit
      </button>
    '
  }

angular
  .module('myApp')
  .directive('editButton', editButton)

Вызов его в моих шаблонах; 

<edit-button model="job" item="job" />

1 Ответ

0 голосов
/ 16 апреля 2019

Вы не можете сделать это sref = {{sref}} внутри шаблона Angularjs.

Когда вы объявляете sref в объекте scope директивы, это означает, что ваша директива получает изолированную область со свойством sref со значением, которое было передано директиве в качестве атрибута.

Это объявление имеет несколько возможных значений, таких как, @, =, &.

  1. @ используется для значения интерполяции, это означает, что всякий раз, когда вы передаете значение атрибуту, вам необходимо пройти некоторую интерполяцию 
<edit-button sref="{{somethingAvailableOnParentScope}}" />
  1. = 2-стороннее связывание данных, вам нужно передать выражение 
<edit-button sref="somethingAvailableOnParentScope" />
  1. & связать функцию, используемую для передачи «указателя» на функцию. (не относится к нашему случаю)

Подводя итог, мы хотим передать значение вызова job_edit нашей директиве, поэтому нам нужно использовать =. 

editButton = () => ({
    restrict: 'EA',
    scope: {
      sref: "="
    },
    template: '
      <button id="edit-btn"
              class="mds__button -blue"
              ui-sref="sref">
        <i class="fa fa-edit"></i> Edit
      </button>
    '
  });

angular
  .module('myApp')
  .directive('editButton', editButton)

И использование будет примерно таким: 

<edit-button sref="job_edit({id: job.id})" />
...