angularjs 指令教程

Question

我是 angularjs 的新手，我想了解指令的作用，但我找不到具有不同示例的复杂性教程，如果我可以在指令中移动以下代码，我会很好奇。

    // 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

我写了一个blog entry not too long ago about the basics of directives如果你对此感兴趣。

至于将您拥有的内容转换为指令，这并不太疯狂。

你要做的就是使用你已经拥有的代码，但是注入(inject) $window 而不是使用 window.window。 (主要用于测试目的)。我还添加了一个检查以确保它没有被应用两次。

所以它看起来有点像这样:

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();
        })();
     }
   };
});

要应用它，您会找到之前应用它的 #page 元素:

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

……那应该是真的。假设您拥有的代码有效，它应该以几乎相同的方式运行。