Angularjs + Spring Boot REST (HATEOAS) - 将 angular 变量传递给 angular 方法

Question

问题出在属性 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 请求在我硬编码时确实有效。

Answer 1

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

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

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

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

不应该是这样的（注意缺少管道 |）？

ng-click="{{expression}}"

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

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

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

这会将 HTML 元素的点击绑定到具有 deleteItem 函数的范围内 model/controller 的调用，将表达式中所需的 href 传递给它。

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

Answer 2

不要将 Angular Expression 传递给函数。不用{{}}.

直接传递变量

你的情况

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

Angularjs + Spring Boot REST (HATEOAS) - 将 angular 变量传递给 angular 方法

Angularjs + Spring Boot REST (HATEOAS) - Passing angular variables into angular methods

spring

spring-mvc

angularjs

spring-hateoas

spring-boot