Angularizers Directive传递动态It-Only

Question

我在一个大型项目中使用旧的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" />

Answer 1

你不能在Angularjs模板中制作那个sref = {{sref}}。

当您在指令的sref对象上声明scope时，这意味着您的指令将获得一个带有sref属性的隔离范围，并将该值作为属性传递给指令。

该声明几乎没有可能的值，例如@，=，&。

1. @用于插值，这意味着无论何时将值传递给属性，都需要通过一些插值

<edit-button sref="{{somethingAvailableOnParentScope}}" />

2. = 2路数据绑定，需要传递一些表达式

<edit-button sref="somethingAvailableOnParentScope" />

3. &绑定一个函数，用于将“指针”传递给函数。 （与我们的案例无关）

总而言之，我们希望将qazxsw poi调用的值传递给我们的指令，因此我们需要使用qazxsw poi。

job_edit

用法将是这样的：

=