Change CSS styles in AngularJS using jQuery

Question

var myApp = angular.module("myApp", []); myApp.controller("votesController", ['$scope', function($scope, $timeout) { $scope.comments = [ ]; $scope.newComment = { likes: 0 }; $scope.createComment = function() { if ($scope.newComment.comment != "") { $scope.comments.push({ comment: $scope.newComment.comment, likes: $scope.newComment.likes }); } }; $scope.incrementLikes = function(comment) { comment.likes++; }; $scope.decrementLikes = function(comment) { comment.likes--; }; }]); $('a.vote_comment').on('click',function(){ $(this).css('color','red'); }); $('a.vote_dis_like_comm').on('click',function(){ $(this).css('color','green'); });

a { cursor:pointer; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div class="container" ng-app="myApp"> <div ng-controller="votesController"> <div ng-repeat="comment in comments"> <div class="comment_box_all"> <div class="comment_user"> <div class="comment_note"> <a ng-click="incrementLikes(comment, $index)" class="vote_comment">Like</a> <span class="num_vote_comm_11"> | {{comment.likes}} | </span> <a ng-click="decrementLikes(comment, $index)" class="vote_dis_like_comm">Unlike</a> </div> <div class="content_text_user_ans"><span>{{comment.comment}}</span></div> </div> </div> </div> <div class="area_comm_tex"> <textarea class="text_area" ng-model="newComment.comment" placeholder="Add comment"></textarea> <button class="op_comm_now" ng-click="createComment()">Add text</button> </div> </div> </div>

This is very simple comment box, but I have one problem. Could you explain to me why changing the CSS style with jQuery not working? I would like change color text like/unlike onclick, but this does not work.

Answer 1

why don't you use ng-style to assign styles from controller like this

 $scope.incrementLikes = function(comment) { comment.likes++; $scope.likeColor = {'color': 'red'} }; $scope.decrementLikes = function(comment) { comment.likes--; $scope.dislikeColor = {'color': 'green'} }; <a id="vote_comment" ng-click="incrementLikes(comment, $index)" class="vote_comment" ng-style="likeColor">Like</a> <span class="num_vote_comm_11"> | {{comment.likes}} | </span> <a ng-click="decrementLikes(comment, $index)" class="vote_dis_like_comm" ng-style="dislikeColor">Unlike</a> </div> 

var myApp = angular.module("myApp", []); myApp.controller("votesController", ['$scope', function($scope, $timeout) { $scope.comments = [ ]; $scope.newComment = { likes: 0 }; $scope.createComment = function() { if ($scope.newComment.comment != "") { $scope.comments.push({ comment: $scope.newComment.comment, likes: $scope.newComment.likes, likeColor : {}, dislikeColor : {} }); } }; $scope.incrementLikes = function(comment) { comment.likes++; comment.likeColor = {'color': 'red'} }; $scope.decrementLikes = function(comment) { comment.likes--; comment.dislikeColor = {'color': 'green'} }; }]);

a { cursor:pointer; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div class="container" ng-app="myApp"> <div ng-controller="votesController"> <div ng-repeat="comment in comments"> <div class="comment_box_all"> <div class="comment_user"> <div class="comment_note"> <a id="vote_comment" ng-click="incrementLikes(comment, $index)" class="vote_comment" ng-style="comment.likeColor">Like</a> <span class="num_vote_comm_11"> | {{comment.likes}} | </span> <a ng-click="decrementLikes(comment, $index)" class="vote_dis_like_comm" ng-style="comment.dislikeColor">Unlike</a> </div> <div class="content_text_user_ans"><span>{{comment.comment}}</span></div> </div> </div> </div> <div class="area_comm_tex"> <textarea class="text_area" ng-model="newComment.comment" placeholder="Add comment"></textarea> <button class="op_comm_now" ng-click="createComment()">Add text</button> </div> </div> </div>

Answer 2

You can actually do this with CSS.

a.vote_comment:active { color: red; } a.vote_dis_like_comm:active { color: green; } 

You can set a color for every aspect of the link:

/* unvisited link */ a:link { color: green; } /* visited link */ a:visited { color: green; } /* mouse over link */ a:hover { color: red; } /* selected link */ a:active { color: yellow; }