使用角度捕捉和捕捉來禁用所有抽屜

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