My directive in angular not working

Question

I'm kinda new to angular.

I want to have a listener for whenever width of document changes.

So first of all I decided to add a $watch like this:

$scope.$watch(function(){
    return $window.innetWidth;
}, function(n, o){
    console.log(n);
    console.log(o);
});

But it only works on page load and not on resize.

Then I decided to write a Directive like this:

app.directive('watchWidth', [function(){
        return {
            restrict: 'A',
            link: function(scope, element) {
                element.style.display = 'none';

                $scope.$watch(function () {
                    return element.innerWidth;
                }, function (n,o) {
                    console.log(n);
                    console.log(o);
                });
            }
        };
    }]);

And add directive to my ng-view:

<div watchWidth ng-view class="main-wrapper"></div>

But nothing work and no error in console and I don't know what should I do!

Any help please?

Did you see this post http://stackoverflow.com/questions/23044338/window-resize-directive ? — aSoler, Sep 17 '15 at 07:34
http://stackoverflow.com/questions/13435604/get-element-inner-height — Sherali Turdiyev, Sep 17 '15 at 07:36
@SheraliTurdiyev clientWidth is undefined and still nothing to watch! and I dont want to use jQuery in this project — Sina Mirhejazi, Sep 17 '15 at 07:44
@aSoler thank you. I was searching for two or three hours and this one missed. — Sina Mirhejazi, Sep 17 '15 at 07:45
@SinaMirhejazi. if you can share your example we help quicly — Sherali Turdiyev, Sep 17 '15 at 08:57

score 1 · Accepted Answer · answered Sep 17 '15 at 09:04

Hi this is my approach to resize the a specific element

.directive('resize', function (Ls) {
    return function (scope, element, attr) {
        scope.resizeWithOffset = function (offsetH) {
                return {
                    'min-height': (window.innerHeight - offsetH) + 'px',
                    'max-height': (window.innerHeight - offsetH) + 'px'
                };
        }
    }
})

In your html it would look like this

<ion-scroll ng-style="resizeWithOffset(270)" resize></ion-scroll>

Basically the element is now resizes down to window-height - the height u can specify ( in this case 270px)

My directive in angular not working

1 Answers1