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

क्या मैं के साथ इस में एक $ घड़ी को एकीकृत है परेशानी आ रही है। विशेष रूप से '$ विंडो' सेवा के साथ विंडो आकार बदलने के लिए देख रहे हैं।

[संपादित करें]:

मैंने महसूस किया कि मेरी इस मुद्दे को इस पूरे समय था ... मैं तत्व को सीमित किया गया था, जब मैं भूल गया था कि मैं एक विशेषता के रूप में यह लागू करने गया था ... @ _ @ ;

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

एचटीएमएल में

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