angularjs $ oglądać rozmiaru okna wewnątrz dyrektywy

Question

mam odsłaniając moduł wzór, który wygląda tak:

'use strict'; 

angular.module('app', []) 
    .directive('myDirective', ['SomeDep', function (SomeDep) { 
     var linker = function (scope, element, attr) { 
      // some work 
     }; 

     return { 
      link: linker, 
      restrict: 'E' 
     }; 
    }]) 
; 

Co mam problemy z integruje dolarów zegarek do tego. Szczególnie obserwując zmianę rozmiaru okna za pomocą usługi "$ window".

[EDIT]:

zdałem sobie sprawę, co mój problem był ten cały czas ... Ja ograniczając się do elementu, gdy zapomniałem, że jestem jej wykonania jako atrybut ... @ _ @ ;

Answer 1

Nie powinieneś potrzebować zegarka $. Wystarczy powiązać zdarzenie na zmianę rozmiaru okna:

DEMO

'use strict'; 

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

app.directive('myDirective', ['$window', function ($window) { 

    return { 
     link: link, 
     restrict: 'E', 
     template: '<div>window size: {{width}}px</div>' 
    }; 

    function link(scope, element, attrs){ 

     scope.width = $window.innerWidth; 

     angular.element($window).bind('resize', function(){ 

     scope.width = $window.innerWidth; 

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

    } 

}]); 

Answer 2

// Poniżej kątowe dyrektywa 2,0 dla rozmiaru okna ponownego że dostosować pasek przewijania dla elementu podać jak za tagu

---- angular 2.0 window resize directive. 
import { Directive, ElementRef} from 'angular2/core'; 

@Directive({ 
     selector: '[resize]', 
     host: { '(window:resize)': 'onResize()' } // Window resize listener 
}) 

export class AutoResize { 

element: ElementRef; // Element that associated to attribute. 
$window: any; 
     constructor(_element: ElementRef) { 

     this.element = _element; 
     // Get instance of DOM window. 
     this.$window = angular.element(window); 

     this.onResize(); 

    } 

    // Adjust height of element. 
    onResize() { 
     $(this.element.nativeElement).css('height', (this.$window.height() - 163) + 'px'); 
    } 
} 

Answer 3

Ty można słuchać zdarzenia resize zdarzeń i ognia, w przypadku których nastąpiła zmiana wymiaru

dyrektywa

(function() { 
'use strict'; 

    angular 
    .module('myApp.directives') 
    .directive('resize', ['$window', function ($window) { 
     return { 
      link: link, 
      restrict: 'A' 
     }; 

     function link(scope, element, attrs){ 
      scope.width = $window.innerWidth; 
      function onResize(){ 
       // uncomment for only fire when $window.innerWidth change 
       // if (scope.width !== $window.innerWidth) 
       { 
        scope.width = $window.innerWidth; 
        scope.$digest(); 
       } 
      }; 

      function cleanUp() { 
       angular.element($window).off('resize', onResize); 
      } 

      angular.element($window).on('resize', onResize); 
      scope.$on('$destroy', cleanUp); 
     } 
    }]); 
})(); 

w HTML

<div class="row" resize> , 
    <div class="col-sm-2 col-xs-6" ng-repeat="v in tag.vod"> 
     <h4 ng-bind="::v.known_as"></h4> 
    </div> 
</div> 

Kontroler:

$scope.$watch('width', function(old, newv){ 
    console.log(old, newv); 
})