angularjs directive tutorials

Question

I am new to angularjs and I would like to understand what the directives do but I can't find a tutorial with different example by complexity and I was curios if I could move the following code in a directive.

    // hide the url bar 
    var page = document.getElementById('page'),
    ua = navigator.userAgent,
    iphone = ~ua.indexOf('iPhone') || ~ua.indexOf('iPod'),
    ipad = ~ua.indexOf('iPad'),
    ios = iphone || ipad,
    // Detect if this is running as a fullscreen app from the homescreen
    fullscreen = window.navigator.standalone,
    android = ~ua.indexOf('Android'),
    lastWidth = 0;

    if (android) {
        // Android's browser adds the scroll position to the innerHeight.
        // Thus, once we are scrolled, the page height value needs to be corrected in case the     page is loaded
        // when already scrolled down. The pageYOffset is of no use, since it always
        // returns 0 while the address bar is displayed.
        window.onscroll = function () {
            page.style.height = window.innerHeight + 'px'
        }
    }
    var setupScroll = window.onload = function () {
        // Start out by adding the height of the location bar to the width, so that
        // we can scroll past it
        if (ios) {
            // iOS reliably returns the innerWindow size for documentElement.clientHeight
            // but window.innerHeight is sometimes the wrong value after rotating
            // the orientation
            var height = document.documentElement.clientHeight;
            // Only add extra padding to the height on iphone / ipod, since the ipad
            // browser doesn't scroll off the location bar.
            if (iphone && !fullscreen) height += 60;
            page.style.height = height + 'px';
        } else if (android) {
            // The stock Android browser has a location bar height of 56 pixels, but
            // this very likely could be broken in other Android browsers.
            page.style.height = (window.innerHeight + 56) + 'px'
        }
        // Scroll after a timeout, since iOS will scroll to the top of the page
        // after it fires the onload event
        setTimeout(scrollTo, 0, 0, 1);
    };
    (window.onresize = function () {
        var pageWidth = page.offsetWidth;
        // Android doesn't support orientation change, so check for when the width
        // changes to figure out when the orientation changes
        if (lastWidth == pageWidth) return;
        lastWidth = pageWidth;
        setupScroll();
    })();

Answer 1

I wrote a blog entry not too long ago about the basics of directives if you're interested in that.

As far as converting what you have there into a directive, it's not too crazy.

All you would do is use the code you already have, but inject $window instead of using window. (Mostly for testing purposes). I also added a check to make sure it didn't get applied twice.

So it would look a little something like this:

app.directive('windowResizeThingy', function($window) {
   return {
     restrict: 'A',
     link: function(scope, elem, attr) {

       // make sure this doesn't get applied twice.
       if($window.windowResizeThingyApplied) return;
       $window.windowResizeThingyApplied = true;

        // hide the url bar 
        var page = elem[0],
          ua = $window.navigator.userAgent,
          iphone = ~ua.indexOf('iPhone') || ~ua.indexOf('iPod'),
          ipad = ~ua.indexOf('iPad'),
          ios = iphone || ipad,
          // Detect if this is running as a fullscreen app from the homescreen
          fullscreen = $window.navigator.standalone,
          android = ~ua.indexOf('Android'),
          lastWidth = 0;

        if (android) {
            // Android's browser adds the scroll position to the innerHeight.
            // Thus, once we are scrolled, the page height value needs to be corrected in case the     page is loaded
            // when already scrolled down. The pageYOffset is of no use, since it always
            // returns 0 while the address bar is displayed.
            window.onscroll = function () {
                page.style.height = window.innerHeight + 'px'
            }
        }
        var setupScroll = $window.onload = function () {
            // Start out by adding the height of the location bar to the width, so that
            // we can scroll past it
            if (ios) {
                // iOS reliably returns the innerWindow size for documentElement.clientHeight
                // but window.innerHeight is sometimes the wrong value after rotating
                // the orientation
                var height = document.documentElement.clientHeight;
                // Only add extra padding to the height on iphone / ipod, since the ipad
                // browser doesn't scroll off the location bar.
                if (iphone && !fullscreen) height += 60;
                page.style.height = height + 'px';
            } else if (android) {
                // The stock Android browser has a location bar height of 56 pixels, but
                // this very likely could be broken in other Android browsers.
                page.style.height = (window.innerHeight + 56) + 'px'
            }
            // Scroll after a timeout, since iOS will scroll to the top of the page
            // after it fires the onload event
            setTimeout(scrollTo, 0, 0, 1);
        };
        ($window.onresize = function () {
            var pageWidth = page.offsetWidth;
            // Android doesn't support orientation change, so check for when the width
            // changes to figure out when the orientation changes
            if (lastWidth == pageWidth) return;
            lastWidth = pageWidth;
            setupScroll();
        })();
     }
   };
});

And to apply it, you'd find your #page element you were applying it to before:

 <div id="page" window-resize-thingy></div>

... and that should be it really. Presuming the code you have works, it should be run pretty much the same way.