我目前正在为AngularJS开发幻灯片菜单指令。javascript由三种类型的指令组成：每种滑动菜单类型的指令（为简便起见，我只包括左滑动菜单），屏幕其余部分的一个包装器指令asmWrapper和一个控制按钮指令asmControl。当前，所有这些指令都使用服务asmService进行通信。
当用户单击asmControl时，该指令的控制器在asmService上调用一个方法，该方法确定已触发哪个菜单，并在$ rootScope上发出“ asmEvent”。asmSlidingMenu的控制器将捕获该事件并更新其作用域中的活动变量，但是DOM元素的CSS类保持不变。
我假设未设置ng-class。我该如何解决？
我在下面包括了asmSlidingMenu指令的代码。要查看更完整的示例，请查看我制作的柱塞。
slideMenu.directive('asmSlideLeft', ['$rootScope', 'asmService',
function($rootScope, asmService) {
return {
restrict: 'AEC'
, scope: {}
, controller: function($scope) {
$rootScope.$on('asmEvent', function(event, prop) {
console.log('Intercepted: ' + asmService.asmStates.slideLeft.active);
$scope.active = asmService.asmStates.slideLeft.active;
});
}
, compile: function(element, attrs) {
attrs.$set('class', 'asm asm-horizontal asm-left');
attrs.$set('data-ng-class', '{"asm-left-open: active"}');
return {
pre: function preLink(scope, iElement, iAttrs) {}
, post: function postLink(scope, iElement, iAttrs) {}
}
}
}
}]);
首先active是在隔离范围内，因此ng-class无法访问它。
其次，更重要的ng-class是，在按角度收集元素的指令之后添加。太晚了。
ng-class如果您有自己的指令，则没有理由使用。
slideMenu.directive('asmSlideLeft', ['$rootScope', 'asmService',
function($rootScope, asmService) {
return {
restrict: 'AEC'
...
link: function(scope, element) {
element.addClass('asm asm-horizontal asm-left');
$rootScope.$on('asmEvent', function() {
if (asmService.asmStates.slideLeft.active) {
element.addClass('asm-left-open');
}
else {
element.removeClass('asm-left-open');
}
...
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句