在Clojure(Hiccup)中点击按钮时如何获取文本框值并拼接URL？

你遇到的问题根源在于：后端在解析:href属性时，会把Angular的模板语法{{date}}当作URI的一部分处理，而{{}}属于URI中的非法字符，因此直接触发了URISyntaxException。这里有两种简单可行的解决办法：

方法一：用Angular的ng-href替代原生href #

Angular专门提供了ng-href指令来处理动态URL场景——它会等Angular完成模板插值后，再将正确的URL赋值给元素的href属性，这样后端就不会提前解析带有{{}}的字符串了。修改后的Hiccup代码如下：

(text-field {:class "form-control" :ng-model "date"} "date" date)
[:a {:class "btn btn-primary" :ng-href "/dashboard/{{date}}"} "Submit..."]

后端渲染时只会把:ng-href的值当作普通字符串输出，不会触发URI合法性检查；等前端Angular加载完成后，会自动把{{date}}替换成输入框的实际值，生成合法的URL。

方法二：通过ng-click手动处理跳转 #

如果需要更灵活的控制（比如跳转前验证输入是否合法），可以用ng-click绑定一个控制器函数，手动拼接URL并跳转：

Hiccup代码 #

(text-field {:class "form-control" :ng-model "date"} "date" date)
[:a {:class "btn btn-primary" :ng-click "navigateToDashboard()"} "Submit..."]

Angular控制器代码 #

angular.module('yourApp').controller('YourController', function($scope) {
  $scope.navigateToDashboard = function() {
    // 可添加验证逻辑，比如检查date是否为空
    if ($scope.date) {
      window.location.href = "/dashboard/" + $scope.date;
    }
  };
});

这种方式完全绕过了后端对URL的解析，所有逻辑都在前端处理，同样能避免URI异常。

内容的提问来源于stack exchange，提问作者podomunro