각도 조정 지시문을 구독하여 크기 조정 이벤트 알림을받을 수 있습니까?

Question

내가 부트 스트랩을 통해 크기와 내 사용자 지정 지시문 myDirective1로 주석되는 요소가 : 요소의 폭이, 말하자면, 사용자를 통해 변경 될 때 내 지시어의 연결 기능 내부

<div class="span4" myDirective1>Hello, world</div> 

을 나는 알고를 등록하려고합니다 초기화 된 브라우저 창 크기를 조정합니다. 내가 그렇게 시각적 요소가 동적으로 단지 예상대로 크기를 조정한다 부트 스트랩의 "컨테이너 유체"와 "행 유체"클래스를 사용하고

element.bind("resize", function() { 
    console.log("Resized"); 

    // Do other stuff 
}); 

. 그러나 DOM의 "크기 조정"이벤트에 대해 설정 한 바인딩은 실행되지 않습니다. "요소"가 실제로 예상되는 요소인지 확인했습니다.

전체 jQuery없이이 작업을 수행하므로 Angular의 JQLite를 사용하고 있습니다.

내가 누락 된 항목이 있습니까?

Answer 1

$window 메서드를 resize() 메서드에 바인딩하는 것만 가능하지만 (jQuery 플러그인이 필요 없음) 그렇다고해서 resize() 윈도우에 요소의 크기를 표시 할 수 없다는 것을 의미하지는 않습니다.

app.directive('sizer', function($window){ 
    return { 
    controller: function($scope){ 
    $scope.inputSize = '?' 
    }, 
    template: '<input type="text" style="width:80%">' + 
      '<br/>' + 
      'Input Size = {{inputSize}}', 

    link: function(scope, element) { 
    var w = angular.element($window); 
    var size = element.find('input')[0].clientWidth; 

    scope.inputSize = size; 

    w.bind('resize', function(){ 
     scope.inputSize = element.find('input')[0].clientWidth; 
     scope.$apply(); 

    }) 
    } 
} 

그리고 here's the plunk : 여기 resize()에 $window을 결합하는 지침은 다음 DOM 요소의 새 폭을 표시하는보기를 업데이트합니다. (플 런커의 라이브 뷰에서 창 크기 업데이트를 확인하기 위해 렌더링 된 뷰의 창 크기를 조정하십시오.)

또한 위의 설명에 올바르지 않습니다. 은 angularjs로 구워졌습니다.

Answer 2

전체 jquery를 참조하는 경우 몇 가지 흥미로운 옵션이 있습니다.

나는 그 차이를 보여주기 위해 rGils plunker를 갈랐다. http://plnkr.co/edit/r6i3Y7tXeWNCp1r3LvYq?p=preview

기본적으로 당신은 당신이 원하는 것을 얻을이 구문을 사용할 수 있습니다 : '크기 조정'행사와 '사이 저'입니다

var resizeHandler = function(){ 
    //code goes here. 
    //added as a var instead of inline so it can be turned off later. 
}; 
$(window).on('resize.sizer', resizeHandler); 

이 지시어이다.

또한이 작업을 수행하는 위치에 따라이 이벤트 핸들러를 제거 할 수도 있습니다 ... 지시문이 ng-if'd 아웃 인 경우 다음을 추가해야합니다.

scope.$on('$destroy', $(window).off('resize.resizer', resizeHandler);