katsu katsu - 1 month ago 7
Ajax Question

Thymeleaf value send angularJS ng-onclick method

My problem is thymeleaf integration with angularJS. I have this thymleaf page:

<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>


my angularJS method this:

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);
};


My code is not working. I have angularJS syntax error:

"Error: Syntax Error: Token '{' is unexpected, expecting []] at column 17 of the expression [addSubComment([${newsComment.comment.id}])] starting at [{newsComment.comment.id}])].

Answer

I digged all internet and then I find a solution.

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

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

Comments