Calling a directive on another element on click - css

Question

I'm currently trying to apply a background-color to the p elements within the 1st div by checking a checkbox that's located within the 2nd div. I'm calling a directive when the input box is clicked, "text-theme-switch", to manipulate the p elements in the first div
<!--HTML-->
<div id="#div1" class="text-main-window">
<div class="text-view-div">
<div ng-repeat="item in text.obj">
<h3 id="{{item.id}}-title">{{item.title}}</h3>
<br/>
<div ng-repeat="art in item.article">
<h4 id="{{art.id}}-art">{{art.artNum}}</h4>
<br/>
<div ng-repeat="subArt in art.subArt " >
<h5 id="{{subArt.id}}-subart" >{{subArt.subArtNum}}</h5>
<div ng-repeat="para in subArt.paragraph" >
<p class="theme-para {{para.ruleTheme}} text-item">{{para.text}}</p>
</div>
<a ui-sref="rulebook.rules.detail({detail:rules.ruleNumber})"
class="rule-style"
ng-repeat="rules in subArt.rule">
{{rules.ruleNumber}} {{rules.ruleName}}<br/>
</a>
<br/>
</div>
</div>
</div>
</div>
</div>
<div class="theme-filter-text-theme">
<h4>Text Themes</h4>
<div class="onoffswitch pull-right">
<input text-theme-switch
ng-model="text.themeView"
val="text.themeView"
ng-change="text.test()"
type="checkbox"
name="onoffswitch"
class="onoffswitch-checkbox"
id="myonoffswitch"
ng-click="showLegend = !showLegend">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="styles-hr"></div>
<div ng-show="showLegend" class="theme-filter-item" ng-repeat="item in text.themes">
<span class="theme-check-tag"
ng-class="{
checkgreen: item.theme === 'enforcement', checkpink: item.theme === 'customer due diligence',
checkorange: item.theme === 'record keeping',
checkblue: item.theme === 'reporting'
}" >
{{item.theme}}
</span>
</div>
</div>
This is the directive that is manipulating the DOM elements in the first div.
//DIRECTIVE
(function(){
'use strict';
angular.module('ganeshaApp')
.directive('textThemeSwitch', function(){
return{
restrict: 'A',
transclude: true,
scope: {textTheme: "="},
link: function(scope, element, attrs){
element.on('click', function(){
$('.text-main-window h3').toggleClass('grey-on');
$('.text-main-window h4').toggleClass('grey-on');
$('.text-main-window h5').toggleClass('grey-on');
$('.rule-style').toggleClass('grey-on');
$('.text-main-window p:not(.rk-class, .enforcement-class, .cdd-class, .reporting-class)').toggleClass('grey-on')
$('.rk-class').toggleClass('rk-class-active');
$('.cdd-class').toggleClass('cdd-class-active');
$('.enforcement-class').toggleClass('enforcement-class-active');
$('.reporting-class').toggleClass('reporting-class-active');
})
}
};
});
})();
And here's the CSS
/*CSS*/
.cdd-class-active{
background-color: $themePink;
#include borderRadius;
}
.reporting-class-active{
background-color: $themeBlue;
#include borderRadius;
}
.rk-class-active{
background-color: $themeOrange;
#include borderRadius;
}
.enforcement-class-active{
background-color: $themeGreen;
#include borderRadius;
}
.highlight-on{
background-color: $veryPaleYellow
}
.grey-on{
opacity: .5;
background-color: white;
}
While the above code is working, I feel like I'm using a whole lot of bad practices here. From what I've read, DOM manipulation should be done from directives. I've also read that in Angular scope should be used rather than selectors, but I can't figure out how a directive should be used with a click event to manipulate the DOM of other elements rather than the one clicked. Should this type of work be delegated to the controller and should the directive be called from somewhere else, or can anyone recommend a cleaner way to do this, using scope rather the selectors?

Answer 1

So I figured out where I was going wrong here. I was putting the directive on the checkbox input and trying to work off the click event. Because of this, I had to search through and find all the elements that needed to be manipulated. What I should have been doing was putting the directives on the elements that needed to be manipulated as seen below.
<div id="#div1" class="text-main-window">
<div class="text-view-div">
<div ng-repeat="item in text.obj">
<h3 class="grey" text-theme-grey="text.themeView" id="{{item.id}}-title">{{item.title}}</h3>
<br/>
<div ng-repeat="art in item.article">
<h4 class="grey" text-theme-grey="text.themeView" id="{{art.id}}-art">{{art.artNum}}</h4>
<br/>
<div ng-repeat="subArt in art.subArt " >
<h5 class="grey" text-theme-grey="text.themeView" id="{{subArt.id}}-subart">
{{subArt.subArtNum}}
</h5>
<div ng-repeat="para in subArt.paragraph" >
<p text-theme-color='text.themeView' class="theme-para {{para.ruleTheme}} text-item">{{para.text}}</p>
</div>
<a ui-sref="rulebook.rules.detail({detail:rules.ruleNumber})"
class="rule-style grey"
text-theme-grey="text.themeView"
ng-repeat="rules in subArt.rule">
{{rules.ruleNumber}} {{rules.ruleName}}<br/>
</a>
<br/>
</div>
</div>
</div>
</div>
<div class="theme-filter-text-theme">
<h4>Text Themes</h4>
<div class="onoffswitch pull-right">
<input ng-model="text.themeView"
type="checkbox"
name="onoffswitch"
class="onoffswitch-checkbox"
id="myonoffswitch"
ng-click="showLegend = !showLegend">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="styles-hr"></div>
<div ng-show="showLegend" class="theme-filter-item" ng-repeat="item in text.themes">
<span class="theme-check-tag"
ng-class="{
checkgreen: item.theme === 'enforcement', checkpink: item.theme === 'customer due diligence',
checkorange: item.theme === 'record keeping',
checkblue: item.theme === 'reporting'
}" >
{{item.theme}}
</span>
</div>
</div>
Now the directives watch the value of the model on the switch for for changes and the classes are added or removed for each element accordingly.
(function(){
'use strict';
angular.module('ganeshaApp')
.directive('textThemeGrey', function(){
return{
restrict: 'A',
link: function(scope, element, attrs){
scope.$watch(attrs.textThemeGrey, function(newVal){
if(newVal){
element.addClass('on')
}else{
element.removeClass('on')
}
})
}
}
})
})();
A much cleaner solution, I think. Hope this helps someone.