Thymeleaf值发送angularJS ng-onclick方法

时间:2015-03-22 19:50:23

标签: javascript ajax angularjs spring thymeleaf

我的问题是百里香与angularJS的整合。我有这个thymleaf页面:

<div ng-controller="ctrlsubcomment" >
    <div class="media" th:fragment="comments"  th:each="newsComment : ${comments}">
        <img class="media-object" src="/resources/images/adam1.jpg" alt="" width="52" height="52" />
        <div class="media-body">
            <div class="media-heading"> 
                <span th:text="${newsComment.comment.user.name}"></span>
                <span th:text="${newsComment.comment.user.surname}"></span>
                <small>
                    <span class="glyphicon glyphicon-calendar"></span>
                    <span th:text="${newsComment.comment.creationTime}"></span>
                </small>
            </div>
            <span th:text="${newsComment.comment.text}"></span>
            <img th:if="${newsComment.comment.image != null and newsComment.comment.image.fileExist()}" th:src="${newsComment.comment.image.getImageData()}" alt="" width="160" height="120"/>
            </div>
            <div class="media-icons" >
                <div class="btn-group" role="group" aria-label="...">
                    <span th:inline="text" th:text="${newsComment.comment.id}">${newsComment.comment.id}</span>
                        <a href="#"  class="btn btn-success btn-xs"><span class="glyphicon glyphicon-thumbs-up"></span> (45)</a>
                        <a href="#"  class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-thumbs-down"></span> (12)</a>
                        <button type="button" ng-click="addSubComment(${newsComment.comment.id})" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#cevapla">
                            <span class="glyphicon glyphicon-share-alt"></span>
                            Cevapla
                        </button>
                </div>
            </div>
            <div class="cevap">
                <img class="media-object" src="/images/adam7.jpg" alt="" width="52" height="52" />
                <div class="media-body">
                <div class="media-heading">Kemal Yapıcı<small> <span class="glyphicon glyphicon-calendar"></span> 04.11.2014 16:30</small></div>
                    some text.
                </div>
            </div>
        </div>
    </div>
</div>

我的AngularJS方法:

app.controller('ctrlsubcomment', function($scope, $http) {
    $scope.newssubcomment = {
        mainComment: { id : ""} ,
        comment: {text: ""}
    };

    $scope.addSubComment = function(commentId) {
        $scope.newssubcomment.mainComment.id = commentId;
        alert("helllo comment : "+commentId +" " + $scope.newssubcomment.mainComment.id);
    };
} 

我的代码无效。我有AngularJS语法错误:

  

&#34;错误:语法错误:令牌&#39; {&#39;是意料之外的,期待[]在[{newsComment.comment.id}])的表达式[addSubComment([$ {newsComment.comment.id}]]]的第17行[]]。

1 个答案:

答案 0 :(得分:15)

我挖了所有互联网然后找到了解决方案。

th:attr="ng-click='addSubComment(\''+${newsComment.comment.id}+'\');'" 

引用: http://www.mattheye.com/passing-data-between-spring-mvc-and-angularjs/