Question

我尝试实现一个window resize custom指令，它工作正常。

问题是它只有在我使用指令名称作为resize时才有效。否则，如果我使用不同的名称作为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不是事件所以使用resize并尝试它（我只纠正宽度）

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

1 个答案: