使用 jQuery 在 AngularJS 中更改 CSS 样式答案

【问题标题】：Change CSS styles in AngularJS using jQuery使用 jQuery 在 AngularJS 中更改 CSS 样式
【发布时间】：2017-07-14 11:14:48
【问题描述】：

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>

这是一个非常简单的评论框，但我有一个问题。你能解释一下为什么用 jQuery 改变 CSS 样式不起作用吗？我想像/不像 onclick 那样更改颜色文本，但这不起作用。

【问题讨论】：

你试过把它放在document.ready中
为什么选择 jQuery 而不是 ngClass + ngClick？这是 Angular，不要用 jQuery 代码污染它
Angular 对我来说是新的，我正在用纯 js 和 jquery 更改我的代码，我认为可以结合 jquery 和 angular。但现在我会尝试用纯角度来做

标签： jquery angularjs

【解决方案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>

【讨论】：

谢谢，这对我来说是一次很棒的经历！
确定没问题 :D
你能看看最后一个问题吗？如果您添加例如3 cmets 并尝试单击喜欢或不喜欢所有更改颜色。如何使仅点击喜欢/不喜欢改变颜色？就像 jquery 中的 $(this) 一样
@V.R 再次查看演示
是 Angular make 循环中的选项，就像在 JS 中一样，如果 textarea 为空，则整个代码将返回 false。因为现在如果 textarea 为空，则添加 Like/Unlike。谢谢

【解决方案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;
}

【讨论】：