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