Custom directive not working if i change the name of the directive

Question

I tried to implement a window resize custom directive and it works fine.

The problem is it works only if i use the directive name as resize. Otherwise if i use different name as windowsize,it is triggered only at the time of page refresh.

here is the controller code

  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>

You should try w.bind('resize') rather then w.bind('windowsize') — Ashish Panchal, Nov 08 '16 at 07:12
I am not getting any error. If i replace directive name windowsize to resize it works fine. @SaEChowdary — Sanjay Hp, Nov 08 '16 at 07:13
@SanjayHp : you are binding an event and I suppose there is no such event like windowsize that's why. hope it will work for you. — Ashish Panchal, Nov 08 '16 at 07:15
Ok but can i tried using directiveName as windowSize and w.bind('resize'). It is not working. @AshishPanchal — Sanjay Hp, Nov 08 '16 at 07:27
any error you are getting ? refer http://stackoverflow.com/questions/31622673/angularjs-watch-window-resize-inside-directive this link hope it will help you. @SanjayHp — Ashish Panchal, Nov 08 '16 at 08:36

score 0 · Accepted Answer · answered Nov 08 '16 at 08:45

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>

Here In this example you done everything correct but one small mistake, you bind event windowresize is not event so use resize and try it(I just correct for width only)

Custom directive not working if i change the name of the directive

1 Answers1