Question

当尝试在数据的网格和列表视图之间切换时，我们构建的自定义指令只会在列表中添加和删除.active类到选定的<a>标记单击元素两次。 grid元素的类添加和删除工作正常。由于网格和列表的构建方式相同，我无法弄清楚缺陷的来源。请注意，网格视图默认处于活动状态，但我已经将其删除或默认情况下将列表设置为活动状态，并且都不会影响问题。

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

            }
        };
    });

Answer 1

我强烈建议在这个典型的激活/停用用例中使用ng-class：

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

您可以清空链接功能。

Answer 2

我猜问题就出现了，因为您已经在模板上启动了.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');
    };
}

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

必须单击元素两次addClass（自定义指令）

2 个答案: