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

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

我正在尝试创建“link”指令，它将作为ui路由器/ui sref的扩展：当状态为当前状态时，我们只显示一个文本（而不是链接）

通过compile（或$compile服务）只执行动态模板不是问题，但如何保持replace选项处于打开状态，该选项将所有指令属性传递给模板

所以我想

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

仪表板 像

仪表板 在一个案例中

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

仪表板 另一方面

实际上，我不需要span的

ui sref

，但这不是什么大问题

---

可能已经存在ui路由器的扩展解决方案。

动态模板？可能没有一个真正的“角度”方法来做这件事。使用静态模板：

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

仪表板
仪表板

您可以通过提供一个函数作为

模板来拥有动态模板，但通常这是错误的方法，因为您没有插值属性值或任何其他对决策有用的内容

嵌套指令是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('')
  };
});

app.directive（'uiLink'，function（）{
返回{
范围：{
uiSref:“@”，
当前：“@？”
},
是的，
模板：[
'',
'',
].加入（“”）
};
});

当模板中有多个根元素时，
replace
不是选项。所以可选属性（类等）应该属于
ui链接
，不必转换为嵌套元素。
那么属性呢？我建议不要使用ui-sref属性。最好是
。因此，您可以将其添加到范围中，并根据自己的喜好使用它，但我指的是其余的属性：
class
，
translate
，等等。。在您的解决方案中，我必须手动传递它们两次
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('')
  };
});