창 innerWidth의 AngularJS 이벤트 크기 변경

창 innerWidth의 AngularJS 이벤트 크기 변경

창문 안쪽 폭의 변화를 관찰할 수 있는 방법을 찾고 있습니다.다음을 시도했지만 작동하지 않았습니다.

$scope.$watch('window.innerWidth', function() {
     console.log(window.innerWidth);
});

좋은 의견이라도 있나?

jQuery를 사용하여 수행할 수 있습니다.

$(window).resize(function(){
    alert(window.innerWidth);

    $scope.$apply(function(){
       //do something to update current scope based on the new innerWidth and let angular update the view.
    });
});

재생성 가능한 범위(ng-repeat 스코프, 다이렉티브스코프 등) 내에 이벤트핸들러를 바인드 하는 경우는, 스코프가 파괴되었을 때에 이벤트핸들러를 언바인드 할 필요가 있는 것에 주의해 주세요.이렇게 하지 않으면 스코프가 다시 작성될 때마다(컨트롤러가 다시 실행됨) 1개의 핸들러가 추가되어 예기치 않은 동작과 누수가 발생합니다.

이 경우 연결된 핸들러를 식별해야 할 수 있습니다.

  $(window).on("resize.doResize", function (){
      alert(window.innerWidth);

      $scope.$apply(function(){
          //do something to update current scope based on the new innerWidth and let angular update the view.
      });
  });

  $scope.$on("$destroy",function (){
      $(window).off("resize.doResize"); //remove the handler added earlier
  });

이 예에서는 jQuery의 이벤트 이름 공간을 사용하고 있습니다.필요에 따라 다르게 할 수 있습니다.

개선점:이벤트 핸들러의 처리에 다소 시간이 걸리는 경우 사용자가 계속 창의 크기를 조정하여 이벤트핸들러가 여러 번 실행되는 문제를 피하기 위해 기능 제한을 고려할 수 있습니다.밑줄을 사용하는 경우 다음을 시도할 수 있습니다.

$(window).on("resize.doResize", _.throttle(function (){
    alert(window.innerWidth);

    $scope.$apply(function(){
        //do something to update current scope based on the new innerWidth and let angular update the view.
    });
},100));

또는 함수의 디버깅:

$(window).on("resize.doResize", _.debounce(function (){
     alert(window.innerWidth);

     $scope.$apply(function(){
         //do something to update current scope based on the new innerWidth and let angular update the view.
     });
},100));

슬롯링과 디버깅의 차이

jQuery는 필요 없습니다!이 간단한 조각은 나에게 잘 어울린다.angular.element()를 사용하여 창 크기 조정 이벤트를 바인드합니다.

/**
 * Window resize event handling
 */
angular.element($window).on('resize', function () {
    console.log($window.innerWidth);
});    

---

언바인드

/**
 * Window resize unbind event      
 */
angular.element($window).off('resize');

도움이 될 만한 jfiddle을 찾았습니다.http://jsfiddle.net/jaredwilli/SfJ8c/

간단하게 하기 위해 코드를 리팩터링했습니다.

// In your controller
var w = angular.element($window);
$scope.$watch(
  function () {
    return $window.innerWidth;
  },
  function (value) {
    $scope.windowWidth = value;
  },
  true
);

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

그런 다음 창을 참조할 수 있습니다.html의 너비

<span ng-bind="windowWidth"></span>

Khanh TO의 솔루션으로 인해 UI 문제가 발생한 경우(나처럼)$timeout500ms 동안 변경되지 않을 때까지 속성을 업데이트하지 않습니다.

var oldWidth = window.innerWidth;
$(window).on('resize.doResize', function () {
    var newWidth = window.innerWidth,
        updateStuffTimer;

    if (newWidth !== oldWidth) {
        $timeout.cancel(updateStuffTimer);
    }

    updateStuffTimer = $timeout(function() {
         updateStuff(newWidth); // Update the attribute based on window.innerWidth
    }, 500);
});

$scope.$on('$destroy',function (){
    $(window).off('resize.doResize'); // remove the handler added earlier
});

참고 자료: https://gist.github.com/tommaitland/7579618

언급URL : https://stackoverflow.com/questions/21626357/angularjs-event-on-window-innerwidth-size-change