angularjs指令教程

至于将你拥有的东西转换为指令,它并不太疯狂.

你要做的只是使用你已经拥有的代码,但是注入$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,// Detect if this is running as a fullscreen app from the homescreen
          fullscreen = $window.navigator.standalone,lastWidth = 0;

        if (android) {
            // Android's browser adds the scroll position to the innerHeight.
            // Thus,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,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>

……那应该是真的.假设您运行的代码,它应该以相同的方式运行.