I have recently crafted a personalized directive in AngularJS. Here's the code snippet:
var esscom = angular.module('esscom',['ngMaterial' ,'ngMessages','ui.bootstrap','ui.router']);
esscom.directive('resize',[function($window){
return function($scope){
console.log("Inside resize dir");
angular.element($window).bind('resize', function() {
console.log("Window resize");
if( $window.innerWidth <= 960){
console.log("Returning ess background");
angular.element("#view").addClass('essbackground');
}
$scope.$apply();
})
};
}]);
This piece of HTML accompanies the above-defined directive:
<div resize id="view">
<h1>Resize this</h1>
</div>
Regrettably, despite my efforts, this implementation fails to detect the resize event. Can you provide any guidance on what might be going wrong?