AngularJS $ finestra di controllo ridimensionare all'interno direttiva

Question

Ho modello modulo rivelatore che assomiglia a questo:

'use strict'; 

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

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

Quello che sto avendo problemi con è l'integrazione di un orologio $ in questo. In particolare guardando per ridimensionare le finestre, con il servizio '$ window'.

[EDIT]:

ho capito che cosa il mio problema è stato per tutto questo tempo ... stavo limitando al elemento, quando ho dimenticato che ero sua attuazione come attributo ... @ _ @ ;

Answer 1

Non è necessario un orologio $. Basta legarsi a ridimensionare evento sulla finestra:

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

// seguito è angolare direttiva 2.0 per la dimensione della finestra re che regola barra di scorrimento per l'elemento dare secondo il vostro tag

---- 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

È può ascoltare resize evento e sparare dove alcune variazioni di dimensione

direttiva

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

in 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> 

Controller:

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