是否建议在 AngularJS 控制器中使用 jQuery 方法？答案

【问题标题】：Is it recommended to use jQuery method in AngularJS controller?是否建议在 AngularJS 控制器中使用 jQuery 方法？
【发布时间】：2014-11-27 21:55:22
【问题描述】：

AngularJS 控制器中是否推荐使用 jQuery 方法？

如果没有，我应该如何转换为下面的 AngularJS？

我知道我可以使用指令，但我需要一个干净简单的方法。

$scope.onEnabled = function (id, enabled) {

    if (enabled) {
        jQuery('#policyRuleTitle-' + id).removeClass('collapsed');
        jQuery('#policyRule-' + id).addClass('in');
        jQuery('#policyRule-' + id).css("height", "");
    } else {
        jQuery('#policyRuleTitle-' + id).addClass('collapsed');
        jQuery('#policyRule-' + id).removeClass('in');
    }
};

【问题讨论】：

使用ng-class，你不需要jQuery
确实 ng-class 是要走的路，对于 css 部分你可以使用ng-style。
看看我的回答

标签： javascript css angularjs angularjs-directive angularjs-scope

【解决方案1】：

不，不推荐这种用法，因为您可以完全在 AngularJS 中轻松完成。

这是一个很好的起点：

<div id="#policyRuleTitle" ng-class="{ collapsed: enable }"></div>
<div id="#policyRule" ng-class="{ in: enable }"></div>

https://docs.angularjs.org/api/ng/directive/ngClass

【讨论】：

我也需要删除样式“高度”属性。 jQuery('#policyRule-' + id).css("height", "");如何使用 ng-style 来完成？我似乎不能允许条件
就像ng-class：ng-style="{ height: your_condition ? your_height : auto }"
我需要从 'style' 中移除 height 属性
您不能删除 HTML/CSS 中的 height 属性。但是auto 是它的默认值，这就是你想要做的。

【解决方案2】：

除了 Binary Brain 答案之外，如果您需要执行复杂的 DOM 操作，或者只是您无法使用本机指令实现且与 DOM 操作相关的任何事情，您可以使用“指令”。

你可以创建一个自定义指令，然后用 DOM 做任何你想做的事情。

在这里阅读：https://docs.angularjs.org/guide/directive

【讨论】：

【解决方案3】：

Don't mix up JQuery with AngularJS，由于这不是一个好的做法，

如果您想更改类和样式，请使用 AngularJS 提供的内置 ngClass、ngStyle 指令功能，而不是使用 JQuery .removeClass 和.addClass.

Working Demo

var myModule = angular.module('myModule', []);

myModule.controller('myController', function($scope) {

  $scope.areaStatus = true;
  $scope.enabled = false;
  $scope.myStyle = {
    'height': '0px'
  }
  $scope.onEnabled = function() {
    if ($scope.enabled) {
      $scope.areaStatus = true;
      $scope.myStyle = {
        'height': '0px'
      }
      $scope.enabled = !$scope.enabled
    } else {
      $scope.areaStatus = false;
      $scope.myStyle = {
        'height': '50px'
      }
      $scope.enabled = !$scope.enabled
    }
  };
});

.in {
  color: red;
}
.collapsed {
  color: green;
}
div {
  border: 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myModule">
  <div ng-controller="myController">
    <button ng-click="onEnabled()" ng-model="myButton">Toggle</button>
    <div ng-style="myStyle" ng-class="{'in' : !areaStatus, 'collapsed' : areaStatus}">This is some text</div>
  </div>
</div>

【讨论】：

我也需要删除样式“高度”属性。 jQuery('#policyRule-' + id).css("height", "");如何使用 ng-style 来完成？我似乎不能允许条件
@in_visible 看看我的更新.....现在添加 in 类时添加高度，添加 collapsed 时删除高度
@in_visible 我想这就是你想要的......jsfiddle.net/1wecv84x

【解决方案4】：

最好的方法是使用 ng-class 和 ng-style。你会在这里找到一个例子： http://jsbin.com/firosoleba/1/edit

<div id="testAngular" ng-controller="mycontroller">

    <div ng-class="div_class">Div Element</div>
    <div ng-style="{'background-color':'yellow'}">Colored Div Element</div>

</div>

和

angular.module('TestApp', [])
.controller('mycontroller',
    ["$scope",
    function($scope){

      $scope.div_class = "myDivClass"
      $scope.div_css = "{'background-color':'yellow'}"

    }]);

【讨论】：