在点击

Question

我正在尝试通过选中位于第二个background-color内的复选框，将p应用于第一个div中的div个元素。我在点击输入框“text-theme-switch”时调用指令来操纵第一个p

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

这是在第一个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范围内应该使用而不是选择器，但我无法弄清楚如何使用click事件来操作其他元素的DOM而不是单击的DOM。是否应该将这种类型的工作委托给控制器并且是否应该从其他地方调用该指令，或者任何人都可以建议使用更清晰的方法来执行此操作，使用范围而不是选择器？

Answer 1

所以我想出了我在这里出错的地方。我把指令放在复选框输入上并试图解决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 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')
                }
            })
        }
    }
})
})();

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