使用角度捕捉和捕捉来禁用所有抽屉

Question

我正在为需要用于移动分辨率和移动设备的捕捉菜单的应用程序工作。

我使用snapjs和angular-snap，默认设置snapjs两个抽屉，左，右，我可以使用与snapRemote.globalOptions.disable =“右”的角扣指令服务禁用此一个抽屉;或在快照内容元素中使用属性snap-opt-disable =“'right”“。

我需要禁用非移动分辨率（> = 768px）中的所有抽屉，实际上我有一个检查这个分辨率的指令，但我不知道如何禁用两个抽屉，左侧和右侧，而不是只有一个抽屉。

这是我的指令：

angular.module('myApp').directive('mobileScreenSwitcher', function ($window, snapRemote) { 
     return { 
      restrict: 'E', 
      link: function (scope) { 

       $window.onresize = function() { 
        checkResolution(); 
       }; 
       checkResolution(); 

       function checkResolution() {     
        var screenWidth = $window.innerWidth; 
        if (screenWidth >= 768) { 
         // I need disable all drawers at this line     
         snapRemote.globalOptions.disable = 'left'; 
        } 
       } 
      } 
     } 
    }); 

这是我实际的HTML代码

<div ui-view="navBar" snap-drawer="left" ></div> 

<div snap-content snap-opt-disable="'right'"> 
    ... content here 
</div> 

<div ui-view="navBar2" snap-drawer="right" ></div> 

Answer 1

试试这个，

angular.module('myApp').directive('mobileScreenSwitcher', function ($window, snapRemote) { 
    return { 
    restrict: 'E', 
    link: function (scope) { 
     snapRemote.getSnapper().then(function(snapper) { 
     function onResizeCallback() { 
      var screenWidth = $window.innerWidth; 
      if (screenWidth >= 768) { 
      snapper.close(); 
      snapper.disable(); 
      } else { 
      snapper.enable(); 
      } 
     } 
     $window.addEventListener('resize', onResizeCallback); 
     onResizeCallback(); 
     }); 

     scope.$on('$destroy', function() { 
     $window.removeEventListener('resize' onResizeCallback); 
     }); 
    } 
    }; 
}); 

以下办法之前已经为我工作：

.run(function ($rootScope, snapRemote) { 
    snapRemote.getSnapper().then(function(snapper) { 
    function onResizeCallback() { 
     if (window.innerWidth <= 1024) { 
     snapper.enable(); 
     } else { 
     snapper.close(); 
     snapper.disable(); 
     } 
    } 

    onResizeCallback(); 

    $(window).resize(onResizeCallback); 
    }); 
});