AngularJS $ наблюдать окно изменения размера внутри директивы

Question

У меня есть показательный образец модуля, который выглядит следующим образом:

'use strict'; 

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

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

Что у меня возникают проблемы с интегрируется в $ часы в этом. В частности, просмотр размера окна с помощью функции «$ window».

[EDIT]:

я понял, что мой вопрос был все это время ... Я ограничивал к элементу, когда я забыл, что я его реализацию в качестве атрибута ... @ _ @ ;

Answer 1

Вам не нужны часы $. Просто связать, чтобы изменить размер окна на событие:

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

// Ниже угловой 2,0 директива для размера окна повторно, что настроить полосу прокрутки для поддавки элемента согласно теге

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

Вы может прослушивать resize событие и огонь при изменении какого-либо измерения

директива

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

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

Контроллер:

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