0

拥有用于指令的动态模板并保留替换选项的最简单（和正确）的方法是什么（希望在我的模板上拥有所有属性）。

我正在尝试创建将作为 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 的扩展解决方案。

4

2 回答 2

2

您可以通过提供函数 as 来获得动态模板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当模板中有多个根元素时，这不是一个选项。因此可选属性（类等）应该属于ui-link并且不必翻译为嵌套元素。

于 2015-07-29T13:42:13.890 回答
0

动态模板？可能没有真正的“角度”方式来做到这一点。使用静态模板：

<span>
  <span ng-if="isCurrent()">Dashboard</span>
  <a ui-sref="{{uiSref}}" ng-if="!isCurrent()">Dashboard</a>
</span>
于 2015-07-29T10:20:40.077 回答