元素必须单击两次才能添加Class(自定义指令）

Element must be clicked twice to addClass (custom directive)

本文关键字：添加 Class 自定义 指令 两次 单击 元素      更新时间：2024-01-20

当尝试在网格和列表视图之间切换数据时，我们为向所选<a>标记添加和删除.active类而构建的自定义指令只会在列表元素单击两次时添加到列表元素。网格元素的类add和remove工作正常。我不知道这个缺陷是从哪里来的，因为网格和列表是一样的。请注意，默认情况下，网格视图是活动的，但我已经尝试过将其删除或将列表设置为活动的，这两者都不会影响问题。

toggle.html：

<nav class="layout-toggle">
    <ul>
        <li>
            <a class="goto-grid active" ng-click="gotoGrid()">
                <img src="example"/>
            </a>
        </li>
        <li>
            <a class="goto-list" ng-click="gotoList()">
                <img src="example"/>
            </a>
        </li>
    </ul>
</nav>

自定义指令：

'use strict';
angular.module('appApp')
    .directive('viewToggle', function (analysisFactory) {
        return {
            templateUrl: 'views/directives/toggle.html',
            restrict: 'EA',
            scope:{},
            link: function (scope, element, attrs) {
                scope.gotoGrid = function(){
                    angular.element( element[0].querySelector('.goto-grid') ).addClass('active');
                    angular.element( element[0].querySelector('.goto-list') ).removeClass('active');
                };
                scope.gotoList = function(){
                    angular.element( element[0].querySelector('.goto-grid') ).removeClass('active');
                    angular.element( element[0].querySelector('.goto-list') ).addClass('active');
                };
            }
        };
    });

我强烈建议对于这个典型的激活/停用用例使用ng类：

<nav class="layout-toggle">
    <ul>
        <li>
            <a ng-class="{'active' : grid}" class="goto-grid" ng-click="grid=true;list=false">
                <img src="example"/>
            </a>
        </li>
        <li>
            <a ng-class="{'active' : list}" class="goto-list" ng-click="grid=false;list=true">
                <img src="example"/>
            </a>
        </li>
    </ul>
</nav>

你可以清空你的链接功能。

我想问题的出现是因为您已经在模板上启动了.active类。

也许更好的策略是删除所有.active类，然后只将其添加到被单击的类中。

link: function (scope, element, attrs) {
    scope.removeAll = function(){
        angular.element( element[0].querySelector('.goto-list') ).removeClass('active');
        angular.element( element[0].querySelector('.goto-grid') ).removeClass('active');
    }
    scope.gotoGrid = function(){
        scope.removeAll();
        angular.element( element[0].querySelector('.goto-grid') ).addClass('active');
    };
    scope.gotoList = function(){
        scope.removeAll();
        angular.element( element[0].querySelector('.goto-list') ).addClass('active');
    };
}

请试一下，让我知道。希望能有所帮助。请记住，这不是一种很有棱角的方式。

相关文章：