Angularjs + Spring Boot REST (HATEOAS) - 将角度变量传递给角度方法答案

【问题标题】：Angularjs + Spring Boot REST (HATEOAS) - Passing angular variables into angular methodsAngularjs + Spring Boot REST (HATEOAS) - 将角度变量传递给角度方法
【发布时间】：2016-02-21 14:11:09
【问题描述】：

问题在于属性 ng-click="deleteItem('{|{ reservation._links.self.href }|}')

<body ng-app="ReservationList">
<div class="content" ng-controller="ReservationListController">
    <div class="panel" ng-repeat="reservation in reservations">
        <div class="itemId{|{reservation.id}|}">
            <button class="close" ng-click="deleteItem('{|{ reservation._links.self.href }|}')">X</button>
            <div class="panel-heading clearfix">
                <h3 class="panel-title">{|{ reservation.firstName }|}</h3>
                <h3 class="panel-title">{|{ reservation.lastName }|}</h3>
            </div>
        </div>
    </div>
</div>
</body>

有趣的是，当我检查 html 源代码时，ng-click 将如下所示：

ng-click="deleteItem('http://localhost:8080/reservation/1')"

但是，当启动 ng-click 函数时，它只会给出未编译的属性名称作为参数：

DELETE http://localhost:8080/%7B%7C%7B%20reservation._links.self.href%20%7D%7C%7D 405 (Method Not Allowed)

DELETE 请求应该以http://localhost:8080/reservation/1 作为端点，但不知何故，当我发送 DELETE 请求时它不会解析属性，只会因为这个未解析的 {[{ reservation._links.self.href }]} 而惹恼我。

我是否应该使用 HAL 链接作为 CRUD 操作的端点，还是将 id 提供给我的删除函数更明智。

请注意http://localhost:8080/reservation/1 上的 DELETE 请求在我硬编码时确实有效。

【问题讨论】：

Angular 中是否有类似“{|{ }]}”的东西，因为我从来没有遇到过这种情况
如果我没记错的话，你会期望 "{{ }}" 但是在角度你可以将语法更改为任何你想要的，所以我把它改成了 "{[{}]}" :)欲了解更多信息，你可以去docs.angularjs.org/api/ng/provider/$interpolateProvider
谢谢兄弟，我不知道这个。

标签： angularjs spring spring-mvc spring-boot spring-hateoas

【解决方案1】：

您可以尝试不使用表达式语法并直接传递它：

ng-click="deleteItem(reservation._links.self.href)"

也许我错了，但我实际上并不熟悉这种语法：

ng-click="{|{expression}|}"

不应该改为这样（注意缺少管道|）？

ng-click="{{expression}}"

另外，我认为您希望将 deleteItem 调用包含在表达式范围内，不是吗？

所以，你最终会得到这个：

ng-click="{{deleteItem(reservation._links.self.href)}}"

这会将对该HTML 元素的单击绑定到具有deleteItem 函数的范围内的模型/控制器的调用，并将表达式中所需的href 传递给它。

在此处阅读表达式：https://docs.angularjs.org/guide/expression

【讨论】：

是的，默认情况下它是 {{ }} 但我通过配置将其更改为 {|{ }]} 因为它与其他一些标签冲突。在没有标签的情况下直接传递它，谢谢:)，我会尽快投票

【解决方案2】：

不要将Angular Expression 传递给函数。直接传递变量，不用{{}}。

你的情况

ng-click="deleteItem(reservation._links.self.href)"

【讨论】：

谢谢，马上修好了 :) 我会尽快投票