当尝试在网格和列表视图之间切换数据时,我们为向所选<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');
};
}
请试一下,让我知道。希望能有所帮助。请记住,这不是一种很有棱角的方式。