Is it recommended to use jQuery method in AngularJS controller?

Question

If not, how should i convert to AngularJS below?

I know I can use directive but I need a clean and simple way.

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

use [ng-class](https://docs.angularjs.org/api/ng/directive/ngClass), you don't need jQuery for that — Felipe Pereira, Nov 27 '14 at 12:25
Indeed ng-class is the way to go, and for the css part you could use [ng-style](https://docs.angularjs.org/api/ng/directive/ngStyle). — ValentinH, Nov 27 '14 at 12:26

score 3 · Accepted Answer · answered Nov 27 '14 at 12:27

3

No, it's not recommended for this kind of usage as you can do it easily entirely in AngularJS.

Here is a good starting point:

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

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

answered Nov 27 '14 at 12:27

Binary Brain

1,170
8
20

I need to remove the style 'height' attribute too. jQuery('#policyRule-' + id).css("height", ""); How can it be done with ng-style? I can't seems to allow a condition – ove Nov 27 '14 at 12:58
Just like with `ng-class`: `ng-style="{ height: your_condition ? your_height : auto }"` – Binary Brain Nov 27 '14 at 13:00
I need the height attribute to be removed from 'style' – ove Nov 27 '14 at 13:02
You cannot remove the `height` attribute in HTML/CSS. But `auto` is its default value and that's what you want to do. – Binary Brain Nov 27 '14 at 13:09

AdirAmsalem · Answer 2 · 2014-11-27T13:55:22.277

2

In addition to Binary Brain answer, you can use "Directives" if you need to do complex DOM manipulations, or just anything that you can't achieve with the native directives and it's related to DOM manipulations.

You can create a custom directive and do there whatever you want with the DOM.

Read here: https://docs.angularjs.org/guide/directive

edited Nov 27 '14 at 13:55

answered Nov 27 '14 at 12:39

AdirAmsalem

176
3

score 1 · Answer 3 · edited May 23 '17 at 12:15

Don't mix up JQuery with AngularJS, Since its not a Good Practice,

If you want to change the class and style use in-built ngClass, ngStyle directive feature provided by AngularJS instead of using JQuery .removeClass and .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>

I need to remove the style 'height' attribute too. jQuery('#policyRule-' + id).css("height", ""); How can it be done with ng-style? I can't seems to allow a condition — ove, Nov 27 '14 at 12:50
@in_visible take a look at my update.....now when class `in` is added height is added and when `collapsed` is added height is removed — Nidhish Krishnan, Nov 27 '14 at 13:10
@in_visible i guess this is what you want....same at http://jsfiddle.net/1wecv84x/ — Nidhish Krishnan, Nov 27 '14 at 13:15

score 0 · Answer 4 · answered Nov 27 '14 at 12:33

The best way to accomplish this is with ng-class and ng-style. You will find an example here: 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>

and

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

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

    }]);

Is it recommended to use jQuery method in AngularJS controller?

4 Answers4