Css 单击时对另一个元素调用指令

我目前正试图通过选中位于第二个

div

中的复选框，将

背景色

应用于第一个

div

中的

p

元素。当点击输入框时，我正在调用一个指令“文本主题开关”，以操作第一个

div

中的

p

元素

<!--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>

这是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;
}

---

当上面的代码运行时，我觉得我在这里使用了大量的错误实践。根据我所读到的，DOM操作应该从指令中完成。我还读过，应该使用in Angular scope而不是选择器，但我不知道如何将指令与click事件一起使用，以操纵其他元素的DOM，而不是单击的元素。这类工作是否应该委托给控制器，指令是否应该从其他地方调用，或者是否有人可以推荐一种更干净的方法来完成这项工作，使用范围而不是选择器？

因此，我在这里找到了错误所在。我将指令放在复选框输入上，并尝试关闭click事件。正因为如此，我不得不搜索并找到所有需要操纵的元素。我应该做的是将指令放在需要操纵的元素上，如下所示

<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 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>

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