自定义指令不工作，如果我更改指令的名称

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不是事件，这样使用调整和尝试它（我只是正确的宽度）