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

Question

使用动态模板指令和保留替换选项的最简单（和正确）方法是什么（想要所有我模板上的属性）。

我正在尝试创建 "link" 指令，它将作为 ui-router/ui-sref 的扩展：当状态为当前状态时 - 我们只显示一个文本（而不是 link）。

通过编译（或 $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-路由器的扩展解决方案。

Answer 1

动态模板？可能没有真正的 "angular" 方法来做到这一点。使用静态模板：

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

Answer 2

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

嵌套指令是 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 不是一个选项。所以可选属性（class 等）应该属于 ui-link 并且不必转换为嵌套元素。

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

AngularJS: Correct way of doing directive with dynamic template and replace option on?

angularjs

angular-ui-router

ui-sref