angularjs指令教程

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

如果你对此感兴趣，我写了一封信

至于把你的指令转换成指令，这并不太疯狂

您所要做的就是使用已有的代码，但是注入$window而不是使用window。（主要用于测试目的）。我还加了一张支票，以确保它不会被申请两次

所以看起来有点像这样：

app.directive（'windowResizeThingy'，函数（$window）{
返回{
限制：“A”，
链接：功能（范围、要素、属性）{
//确保这不会被应用两次。
如果（$window.windowResizeThingyApplied）返回；
$window.windowResizeThingyApplied=true；
//隐藏url栏
变量页=元素[0]，
ua=$window.navigator.userAgent，
iphone=~ua.indexOf（'iphone'）| | ~ua.indexOf（'iPod'），
ipad=~ua.indexOf（'ipad'），
ios=iphone | | ipad，
//从主屏幕检测此应用程序是否作为全屏应用程序运行
全屏=$window.navigator.standalone，
android=~ua.indexOf（'android'），
lastWidth=0；
如果（android）{
//Android浏览器将滚动位置添加到内部高度。
//因此，一旦我们被滚动，页面高度值需要在页面被加载的情况下被更正
//当页面已经向下滚动时。页面偏移没有任何用处，因为它总是
//显示地址栏时返回0。
window.onscroll=函数（）{
page.style.height=window.innerHeight+'px'
}
}
var setupScroll=$window.onload=函数（）{
//首先，将位置栏的高度添加到宽度，以便
//我们可以滚动过去
如果（ios）{
//iOS可靠地返回documentElement.clientHeight的innerWindow大小
//但window.innerHeight在旋转后有时是错误的值
//方向
变量高度=document.documentElement.clientHeight；
//仅在iphone/ipod上添加额外的填充物，因为ipad
//浏览器不会从位置栏中滚动。
如果（iphone&！全屏）高度+=60；
page.style.height=高度+px；
}else if（安卓）{
//Android股票浏览器的位置栏高度为56像素，但
//这很可能在其他Android浏览器中被打破。
page.style.height=（window.innerHeight+56）+“px”
}
//超时后滚动，因为iOS将滚动到页面顶部
//在触发onload事件之后
设置超时（滚动到，0，0，1）；
};
（$window.onresize=函数（）{
var pageWidth=page.offsetWidth；
//Android不支持方向改变，所以请检查宽度何时改变
//更改以确定方向何时更改
if（lastWidth==pageWidth）返回；
lastWidth=页面宽度；
setupScroll（）；
})();
}
};
});

要应用它，您可以找到以前应用它的#页面元素：

---

。。。这应该是真的。假定您的代码可以正常工作，它应该以几乎相同的方式运行。

虽然您可能可以，但我不确定它是否完美匹配（这看起来像是您可能只是在一个应用程序中执行的操作。您是否有您已经尝试过的代码？您具体遇到了什么问题？