unknown - AngularJS $ window window resize internal directive

angular min js 102 error[$ injector unpr

Question

Tengo un patrón de módulo revelador que se ve así:

''use strict'';

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

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

Lo que estoy teniendo problemas es integrar un $ watch en esto. Específicamente observando el tamaño de la ventana, con el servicio ''$ window''.

[EDITAR]:

Me di cuenta de cuál era mi problema todo este tiempo ... Estaba restringiendo el elemento, cuando olvidé que lo estaba implementando como un atributo ... @ _ @;

Answer 1

// La siguiente es la directiva angular 2.0 para el tamaño de la ventana que ajusta la barra de desplazamiento para dar el elemento según tu etiqueta

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

No deberías necesitar un $ watch. Solo enlace para cambiar el tamaño del evento en la ventana:

MANIFESTACIÓN

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

Puedes escuchar el evento de cambio de resize y disparar donde algún cambio de dimensión

directiva

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

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

Controlador :

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