自定義指令不工作，如果我更改指令的名稱

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>

在這裏，在這個例子中，你所做的一切都是正確的，但一個小的失誤，你綁定事件windowresize不是事件，這樣使用調整和嘗試它（我只是正確的寬度）