根據windowidth定義和觀察變量

Question

我很努力地創建一個指令來分配和更新一個變量，與窗口寬度進行比較，並使用調整大小進行更新。

與使用CSS相比，我需要該變量，因爲我將它工作到ng-if。和我一起，我是新來的。我究竟做錯了什麼？下面是代碼：

var app = angular.module('miniapp', []); 

功能的AppController（$範圍）{}這裏

app.directive('widthCheck', function ($window) { 
    return function (scope, element, attr) { 

     var w = angular.element($window); 
     scope.$watch(function() { 
      return { 
       'w': window.innerWidth 
      }; 
     }, function (newValue, oldValue, desktopPlus, isMobile) { 
      scope.windowWidth = newValue.w; 
      scope.desktopPlus = false; 
      scope.isMobile = false; 
      scope.widthCheck = function (windowWidth, desktopPlus) { 
       if (windowWidth > 1399) { 
       scope.desktopPlus = true; 
       } 
       else if (windowWidth < 769) { 
       scope.isMobile = true; 
       } 
       else { 
       scope.desktopPlus = false; 
       scope.isMoblie = false; 
       } 
      } 

     }, true); 

     w.bind('resize', function() { 
      scope.$apply(); 
     }); 
    } 
}); 

的jsfiddle：http://jsfiddle.net/h8m4eaem/2/

Answer 1

在本SO answer提到它可能更好地綁定到窗口大小調整事件與出手表。 （類似於伯格先生的回答）

類似於下面的演示或在此fiddle應該工作。

var app = angular.module('miniapp', []); 
 

 
function AppController($scope) {} 
 

 
app.directive('widthCheck', function($window) { 
 
    return function(scope, element, attr) { 
 
    var width, detectFalse = { 
 
     desktopPlus: false, 
 
     isTablet: false, 
 
     isMobile: false 
 
    }; 
 

 
    scope.windowWidth = $window.innerWidth; 
 

 
    checkSize(scope.windowWidth); // first run 
 

 
    //scope.desktopPlus = false; 
 
    //scope.isMoblie = false; // typo 
 
    //scope.isTablet = false; 
 
    //scope.isMobile = false; 
 

 
    function resetDetection() { 
 
     return angular.copy(detectFalse); 
 
    } 
 

 
    function checkSize(windowWidth) { 
 
     scope.detection = resetDetection(); 
 

 
     if (windowWidth > 1000) { //1399) { 
 
     scope.detection.desktopPlus = true; 
 
     } else if (windowWidth > 600) { 
 
     scope.detection.isTablet = true; 
 
     } else { 
 
     scope.detection.isMobile = true; 
 
     } 
 
    } 
 
    angular.element($window).bind('resize', function() { 
 
     width = $window.innerWidth; 
 
     scope.windowWidth = width 
 

 
     checkSize(width); 
 
     // manuall $digest required as resize event 
 
     // is outside of angular 
 
     scope.$digest(); 
 
    }); 
 
    } 
 
});

.fess { 
 
    border: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="miniapp" ng-controller="AppController"> 
 

 
    <div width-check class="fess" resize> 
 
    window.width: {{windowWidth}} 
 
    <br />desktop plus: {{detection.desktopPlus}} 
 
    <br />mobile: {{detection.isMobile}} 
 
    <br />tablet: {{detection.isTablet}} 
 
    <br/> 
 
    </div> 
 
</div>

Answer 2

scope.widthCheck被分配一個匿名函數，並重新指派相同的功能這個觀察者每次發射。我也注意到它從未被調用過。

你應該將那件出了$手錶和調用函數時，觀察者火災

Answer 3

沒有必要的手錶，你已經綁定來調整。在那裏移動你的邏輯。正如段俊說你不斷創造這個功能。這裏的變化：

app.directive('widthCheck', function ($window) { 
    return function (scope, element, attr) { 

     function widthCheck(windowWidth) { 
      if (windowWidth > 1399) { 
       scope.desktopPlus = true; 
      } 
      else if (windowWidth < 769) { 
       scope.isMobile = true; 
      } 
      else { 
       scope.desktopPlus = false; 
       scope.isMoblie = false; 
      } 
     } 
     windowSizeChanged(); 

     angular.element($window).bind('resize', function() { 
      windowSizeChanged();    
      scope.$apply(); 
     }); 
     function windowSizeChanged(){ 
      scope.windowWidth = $window.innerWidth; 
      scope.desktopPlus = false; 
      scope.isMobile = false; 
      widthCheck(scope.windowWidth); 
     } 
    } 
}); 

的jsfiddle：http://jsfiddle.net/eqd3zu0j/