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

Indeed ng-class is the way to go, and for the css part you could use ng-style. — ValentinH
– ValentinH, Commented Nov 27, 2014 at 12:26

Binary Brain · Accepted Answer · 2014-11-27 12:27:57Z

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, 2014 at 12:27

Binary Brain

1,20110 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ove Over a year ago

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

Binary Brain Over a year ago

Just like with ng-class: ng-style="{ height: your_condition ? your_height : auto }"

ove Over a year ago

I need the height attribute to be removed from 'style'

Binary Brain Over a year ago

You cannot remove the height attribute in HTML/CSS. But auto is its default value and that's what you want to do.

AdirAmsalem · Accepted Answer · 2014-11-27 13:55:22Z

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, 2014 at 13:55

answered Nov 27, 2014 at 12:39

AdirAmsalem

1763 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:15:51Z

1

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>

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered Nov 27, 2014 at 12:45

Nidhish Krishnan

20.8k6 gold badges67 silver badges78 bronze badges

3 Comments

ove Over a year ago

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

Nidhish Krishnan Over a year ago

@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 Over a year ago

@in_visible i guess this is what you want....same at jsfiddle.net/1wecv84x

maxgallo · Accepted Answer · 2014-11-27 12:33:00Z

0

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'}"

    }]);

answered Nov 27, 2014 at 12:33

maxgallo

4783 silver badges14 bronze badges

Collectives™ on Stack Overflow

Is it recommended to use jQuery method in AngularJS controller?

4 Answers 4

4 Comments

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related