ディレクティブの名前を変更すると、カスタムディレクティブが動作しない

Question

私はウィンドウリサイズカスタムディレクティブを実装しようとしましたが、うまくいきます。

問題はリサイズとしてディレクティブ名を使用する場合にのみ問題です。 それ以外の場合、windowsizeと異なる名前を使用すると、ページの更新時にのみトリガーされます。ここ

は、コントローラのコードこの例では、ここで

var app = angular.module('miniapp', []); 

function AppController($scope) { 
    /* Logic goes here */ 
} 

> > app.directive('windowsize', function($window){ 
>   return function(scope,element){ 
>    var w=angular.element($window); 
>    scope.getWindowDimension=function(){ 
>     return{ 
>      'w': w.width() 
>     }; 
>    }; 
>    scope.$watch(scope.getWindowDimension, function (newValue, oldValue) { 
>    scope.windowWidth = newValue.w; 
>    console.log(scope.windowWidth); 
> 
>   }, true); 
>    w.bind('windowsize', function() { 
>    scope.$apply(); 
>   }); 
>  }; 
>  }) 



html code 
<div ng-app="miniapp" ng-controller="AppController" windowsize> 
    window.height: {{windowHeight}} 
    <br />window.width: {{windowWidth}} 
    <br /> 
</div> 

Answer 1

var app = angular.module('miniapp', []); 
 

 
function AppController($scope) { 
 
    /* Logic goes here */ 
 
} 
 

 
app.directive('windowsize', function($window){ 
 
     return function(scope,element){ 
 
      var w=angular.element($window); 
 
      scope.getWindowDimension=function(){ 
 
       return{ 
 
         'w': w.width() 
 
       }; 
 
      }; 
 
       scope.$watch(scope.getWindowDimension, function (newValue, oldValue) { 
 
       scope.windowWidth = newValue.w; 
 
       console.log(scope.windowWidth); 
 
     }, true); 
 
       w.bind('resize', function() { 
 
      scope.$apply(); 
 
     }); 
 
     }; 
 
     })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
html code 
 
<div ng-app="miniapp" ng-controller="AppController" windowsize> 
 
    window.height: {{windowHeight}} 
 
    <br />window.width: {{windowWidth}} 
 
    <br /> 
 
</div>

あなたは正しいのすべてが、1つの小さなミスをしている、あなたバインドイベントwindowresizeので、サイズ変更を使用してみてくださいイベントではありませんそれは（私はちょうど幅のためにちょうど訂正する）