Рекомендуется использовать метод jQuery в контроллере AngularJS?

Question

Рекомендуется ли использовать метод jQuery в контроллере AngularJS?

Если нет, то как мне преобразовать в 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'); 
    } 
}; 

Answer 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

Answer 2

Лучший способ сделать это с нг-класса и нг-стиле. Вы найдете здесь пример: 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'}" 

    }]); 

Answer 3

В дополнение к бинарной Brain ответ, вы можете использовать «директивы», если вам нужно сделать сложные DOM манипуляции, или просто что-нибудь что вы не можете достичь с помощью родных директив, и это связано с манипуляциями с DOM.

Вы можете создать пользовательскую директиву и делать все, что захотите, с помощью DOM.

Читайте здесь: https://docs.angularjs.org/guide/directive

Answer 4

Don't mix up JQuery with AngularJS, так как его не является хорошей практикой,

Если вы хотите изменить класс и стиль использования в сложенный ngClass, ngStyle директива особенность при условии by AngularJS вместо использования 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>