css - 单击时调用另一个元素上的指令

Question

我目前正在尝试通过选中位于第一个 div 中的复选框将 background-color 应用于 p 元素第二个 div。我在单击输入框时调用指令“text-theme-switch”，以操作第一个 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>

这是在第一个 div 中操作 DOM 元素的指令。

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

})();

这是 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 操作应该从指令中完成。我还读到在 Angular 范围内应该使用而不是选择器，但我无法弄清楚如何将指令与单击事件一起使用来操纵其他元素的 DOM 而不是单击的元素。是否应将此类工作委托(delegate)给 Controller ，是否应从其他地方调用指令，或者有人可以推荐一种更简洁的方法来执行此操作，使用范围而不是选择器？

Answer 1

所以我想出了我哪里出错了。我将指令放在复选框输入上并尝试处理单击事件。因此，我必须搜索并找到所有需要操作的元素。我应该做的是将指令放在需要操作的元素上，如下所示。

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

我认为这是一个更简洁的解决方案。希望这对某人有帮助。