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属性的隔离范围，并将其值传递给该指令作为属性。

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

@用于插值，这意味着每当您向属性传递值时，都需要传递一些插值

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

= 2种数据绑定方式，您需要传递一些表达式

<edit-button sref="somethingAvailableOnParentScope" />

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

总而言之，我们希望将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})" />

AngularJS指令传递动态ui-sref

1 个答案: