更改CSS樣式AngularJS使用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(){ 
 
\t $(this).css('color','red'); \t \t \t \t \t \t 
 
\t }); 
 
$('a.vote_dis_like_comm').on('click',function(){ 
 
\t $(this).css('color','green'); 
 
\t });

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>

這是非常簡單的評論框，但我有一個問題。你能向我解釋爲什麼用jQuery改變CSS樣式不工作？我想要改變顏色文字/不像onclick，但這不起作用。

Answer 1

你爲什麼不使用ng-style從控制器指定樣式這樣

$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

實際上，你可以做到這一點with CSS。

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

您可以設置爲鏈接的方方面面顏色：

/* 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; 
}