AngularJS条件性href

Question

有人能指导我如何做一个有条件的href而不是复制一个a标签来进行隐藏/显示吗？

这是我在尝试做什么，如果DisplayLocation为空，则使用"unknown"字符串，否则使用位置。我尝试像x ? y : "unknown"这样的东西，但我认为在href中不起作用。

<a class="btn-main orange" href="#!/movie-details/
   {{movie.Item.DisplayLocation | prettify}}/
   {{movie.Item.Title | prettify}}/{{movie.Item.Id}}" 
   id="view--{{$index}}"> View
</a>

修复：

<a class="btn-main orange" data-ng-href="#!/movie-details/
   {{movie.Item.DisplayLocation ? 
       movie.Item.DisplayLocation : 'unknown' | prettify}}/
   {{movie.Item.JobTitle | prettify}}/
   {{movie.Item.Id}}" 
   id="view--{{$index}}">View
</a>

- MrNew

---

使用 ng-href。 - ryanyuyu

但是我该如何实际执行条件部分呢？ - MrNew

如果它在双大括号内，Angular 应将其视为表达式并正确评估条件。 - ryanyuyu

Answer 1

你可以在控制器中创建一个函数，并将其用于绑定。

控制器：

$scope.returnConditionalDisplayLocation = function returnConditionalDisplayLocationFn() {
    return $scope.movie.Item.DisplayLocation ? 
           $scope.movie.Item.DisplayLocation : "unknown";
}

HTML:

<a class="btn-main orange" 
   href="#!/movie-details/{{returnConditionalDisplayLocation() | prettify}}/
   {{movie.Item.Title | prettify}}/{{movie.Item.Id}}" id="view--{{$index}}"> View
</a>

通过将逻辑分离到控制器中，您可以将HTML进行清理！

编辑：

使用href是可以的，但如果用户在angular有足够时间渲染 href 的绑定值之前单击链接，则会到达错误网址。

因此，根据Angular文档，您应该使用ng-href。

同样地，您可以编写：

<a class="btn-main orange" ng-href="#!/movie-details/
   {{returnConditionalDisplayLocation() | prettify}}/
   {{movie.Item.Title | prettify}}/{{movie.Item.Id}}" 
   id="view--{{$index}}"> View
</a>

- Sean Larkin

---

你仍然需要使用 ng-href。否则，href 将被字面解释，而不会作为表达式进行评估。 - ryanyuyu

不行。href 是 Angular 无法修改而不会产生不良后果的少数属性之一。这就是为什么他们提供了 ng-href 和 ng-src 的原因。 - ryanyuyu

抱歉，@ryanyuyu 在你进行下投票之前，请先检查一下你的答案，http://codepen.io/TheLarkInn/pen/epqKod 你所说的唯一“不良后果”是在绑定更新锚点href之前，有人点击了链接。无论你是否下投票，我已经更新了答案以反映两种选择。 - Sean Larkin

@SeanLarkin 永远不应该假设是我给你的踩（投票是匿名的）。不过你的答案现在更好了。 - ryanyuyu

Answer 2

将所有内容移到一个表达式中，并将过滤器处理为子表达式。这样，您就可以使用非常小的占用空间并且不会使控制器混乱来获得所需的内容：

<a class="btn-main orange" href="#!/movie-details/{{ !movie.Item.DisplayLocation ? 'unknown' : ((movie.Item.DisplayLocation | prettify) + '/' + (movie.Item.Title | prettify) + '/' + (movie.Item.Id)) }}" id="view--{{$index}}">View</a>

额外的括号是可选的，但在我看来可以增加清晰度。 此外，正如ryanyuyu指出的那样，请使用ng-href以防止未解析内容的闪烁。

- JD Smith

---

@Sean Larkin，你的回答也是有效的，但我认为“Angular方式”是尽可能保持控制器简洁。这意味着，如果可以使用表达式轻松解决问题（就像我在这里所做的那样），那么没有必要为了条件逻辑而仅添加一个额外的方法来使控制器混乱。想象一下，如果他在多个区域都遇到这个问题-你的方法将添加多个控制器方法并使代码膨胀。 - JD Smith

HTML中的表达式让我感到很不舒服，这是我对Angular的抱怨之一。我更喜欢在实际代码中编写逻辑，而不是将其作为HTML属性中的字符串。 - Ruan Mendes

Angular希望您保持控制器的精简，即将它们放置在管理数据的任何后端中，而不是将该逻辑转嫁到视图中。如果问题出在其他地方，正如您所提到的那样，您仍然会像使用控制器一样重复代码。 - ragerory