ウィンドウのサイズ変更の指示が働かない

Question

私はAngularJSでカスタムディレクティブを作成しました。次のようにコードは次のとおりです。

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

次のようにHTMLは次のとおりです。

<div resize id="view"> 
    <h1>Resize this</h1> 
</div> 

これはうまく動作しません。 resizeイベントは決して検出されません。私は間違って何かしていますか？

Answer 1

ディレクティブの機能は次のように返す必要があります：

esscom.directive('resize',['$window',function($window){ 
    return { 
     link: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(); 
      }) 
     } 
    }; 
}]); 

あなたは$windowを注入する必要があります。