Question

为指令设置动态模板以及保持替换选项的最简单（和正确）方法是什么（希望在我的模板上拥有所有属性）。

我试图创建＆＃34;链接＆＃34;指令将是ui-router / ui-sref的扩展：当状态是当前状态时 - 我们只显示一个文本（不是链接）。

通过编译（或$ compile服务）只做动态模板不是问题，但我怎样才能保持替换选项，将所有指令属性传递给模板。

所以我想

<ui-link ui-sref="dashboard.common" class="nav-alt__item">Dashboard</ui-link>

像

<a ui-sref="dashboard.common" class="nav-alt__item">Dashboard</a>

在一个案例中

<span ui-sref="dashboard.common" class="nav-alt__item">Dashboard</span>

在另一个。

实际上我并不需要ui-sref来获得跨度，但这不是一个大问题。

可能已存在ui-router的扩展解决方案。

Answer 1

您可以通过提供template函数来拥有动态模板，但通常这是错误的方式，因为您没有插值属性值或其他任何可能对决策有用的内容。< / p>

Nesting指令是Angular所熟悉的。

app.directive('uiLink', function () {
  return {
    scope: {
      uiSref: '@',
      current: '@?'
    },
    transclude: true,
    template: [
      '<a ng-if="!current" ui-sref="{{uiSref}}" ng-transclude></a>',
      '<span ng-if="current" ng-transclude></span>',
    ].join('')
  };
});

当模板中有多个根元素时，

replace不是一个选项。因此，可选属性（类等）应属于ui-link，并且不必转换为嵌套元素。

Answer 2

动态模板？可能没有一个真正的＃34;有角度的＆＃34;这样做的方式。使用静态模板：

<span>
  <span ng-if="isCurrent()">Dashboard</span>
  <a ui-sref="{{uiSref}}" ng-if="!isCurrent()">Dashboard</a>
</span>

AngularJS：使用动态模板和替换选项进行指令的正确方法？

2 个答案: