angular点击查看更多（简单demo）

　　今天来跟大家分享一个小的demo，一般网页浏览到底部的时候会有一个点击加载更多的按钮，之前一直纠结怎么写这个，今天学习angular时发现可以用组件来实现这么一个小的效果，大家有兴趣的话可以看一下。

点击加载更多，代码如下：

<!DOCTYPE html>
<html ng-app="indexApp">//绑定模块
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #fixed{
                height: 500px;
                overflow: auto;
            }
        </style>
        <script src="../js/angular.1.5.6.js"></script>//引入angular库
        <script>
            var app = angular.module('indexApp',[]);//定义模块
            app.controller('indexCtrl',['$scope',function($scope){//定义控制器
                $scope.items = ['a','b'];
                for(var i=0;i<=30;i++){
                    $scope.items.push(Math.random()*10);
                }
                $scope.loca = function(){
                    for(var j=0;j<=10;j++){
                        $scope.items.push(Math.random()*10);
                    }
                }

            }]);
            app.directive('ngScroll',function(){//组件
                return {
                    template:'<ul><li ng-repeat="item in items">{{item}}</li></ul>',
                }
            });
        </script>
    </head>
    <body>
        <div ng-controller="indexCtrl">
            <div id="fixed" ng-scroll=""></div><!--指令的方式-->
            <button ng-click="loca()">查看更多</button>
        </div>
    </body>
</html>

滑动到底部自动加载：
<!DOCTYPE html>
<html ng-app="loadMoreApp">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        #fixed {
            height: 500px;
            overflow: auto;/*溢出显示滚动条*/
        }
    </style>
    <body>
        <div ng-controller="indexCtrl">
            <div id="fixed" ng-scroll="loadMore()"><!--指令的方式-->
                
            </div>
        </div>
    </body>
    <script src="js/angular.js"></script>
    <script>
        var app = angular.module('loadMoreApp', []);//定义一个模块
        app.controller('indexCtrl', ['$scope', function($scope) {//定义一个控制器
            $scope.items = ['a', 'b'];
            var i = 0;
            for(; i <= 30; i++) {
                $scope.items.push(Math.random() * 10);//生成随机数，加到items这个数组后
            }
            $scope.loadMore = function() {
                var j = 0;
                for(; j <= 10; j++) {
                    $scope.items.push(Math.random() * 10);
                }
            }
            
        }]);
        //定义一个组件
        app.directive('ngScroll', [function() {
            return {
                template: '<ul><li ng-repeat="item in items">{{item}}</li></ul>',
                link: function(scope, ele, attr) {
                    //                    console.log(ele);
                    ele.bind('scroll', function(e) {
//                        console.log("offsetHeight:" + e.target.offsetHeight)
//                        console.log("scrollTop:" + e.target.scrollTop) //滚动的距离
//                        console.log("scrollHeight" + e.target.scrollHeight)
                        if(e.target.offsetHeight + e.target.scrollTop >= e.target.scrollHeight) {
                            console.log("你已经到底了")
                            scope.$apply(attr.ngScroll);
                        }
                    })
                }
            }
        }])
    </script>
</html>