enoyao

``` #fixed { height: 500px; overflow: auto; } var app = angular.module('wsscat', []); app.controller('indexCtrl', function($scope) { $scope.items = ['wsscat']; var i = 0; for(; i = ele[0].scrollHeight) { console.log("已经到最底"); scope.$apply(attr.whenscrolled);...

## 让下拉刷新组件自适应高度 我们根据上面可以继续改进，首先在组件中引入$window服务 在上面加上关键的这一句 `elm.css('height', $window.innerHeight + 'px');` 我们可以从`$window.innerHeight`获取设备的高度，然后把高度加在这个这个组件上，这里要注意的是我原本在内链的样式中设置了height的高度是100%，当我们**ng-repeat**渲染前是无法获取列表的高度的，所以组件让我们在渲染后获取 这里注意的是如果设备时手机的话一定要加上这句话才能准确获取高度 ``  下面这句话等价，均可在组件里面执行loadMore函数 ``` //scope.$apply(attr.whenScrolled); //执行 loadMore函数 scope.$apply(scope.loadMore) ```

``` li { /*height: 120px;*/ border-bottom: 1px solid gray; } #fixed { height: 100%; overflow: auto; } {{item}} var app = angular.module('wsscat', []); app.controller('indexCtrl', function($scope) { $scope.items = ['wsscat number'];...

利用监听touchstart，touchmove和touchend我们就可以实现下拉刷新 ``` * { margin: 0; padding: 0; } li { /*height: 120px;*/ border-bottom: 1px solid gray; } #fixed { height: 100%; width: 100%; overflow: auto; position: absolute; transition: all...

## 有header时候的下拉刷新 注意如果高度不是全屏的话，刷新框的下拉刷新算法要加上header的距离 `raw.scrollTop + raw.offsetHeight + 0.10*$window.innerHeight >= raw.scrollHeight` 还要注意的是下拉刷新要绝对定位并且设置属性overflow: auto;，让它出现滚动条 ```html * { margin: 0; padding: 0; } body{ height: 100%; width: 100%; } li { /*height: 120px;*/...

有header时候的下拉刷新 ```js $(document).ready(function () { //ready（）文档加载完执行函数 $(window).scroll(function () { var scrollTop = $(this).scrollTop(); //滚动条距离顶部的高度 var scrollHeight = $(document).height(); //当前页面的总高度 var windowHeight = $(this).height(); //当前可视的页面高度 if (scrollTop + windowHeight >= scrollHeight)...

``` wsscat的应用 /* 使用ui-router来进行路由定义，需要注入ui.router模块 */ var app = angular.module('wsscat', ['ui.router']); /* 注入$stateProvider，$urlRouterProvider */ app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { /* 使用when来对一些不合法的路由进行重定向 */ $urlRouterProvider.when('', '/main'); /* 通过$stateProvider的state()函数来进行路由定义 */ $stateProvider.state('main', { url: '/main',...

## 切换页面的时候，链接变色 首先我们用app.run方法在每次我们进入到对应路由前获取我们当前路由的地址 这里用到$location服务获取路由地址，注意我这里是用了ui-router，所以是$stateChangeSuccess，如果是ng-router那就是$routerChangeSuccess ``` app.run(function($rootScope, $location) { $rootScope.$on('$stateChangeSuccess', function(data) { console.log($location.path()) $rootScope.path = "#"+$location.path() }) }) ``` 然后在对应的DOM结构中写上这样来切换这个类 `pageMain1`

# ng路由 加载路由依赖，放在angular框架后面 ``` ``` **$location.path** **$routeProvider** 两个核心方法`when()`和`otherwise()` - controller //function或string类型。在当前模板上执行的controller函数，生成新的scope - controllerAs //string类型，为controller指定别名 - template //string或function类型，视图所用的模板，这部分内容将被ngView引用 - templateUrl //string或function类型，当视图模板为单独的html文件或是使用了定义模板时使用 - resolve //指定当前controller所依赖的其他模块 - redirectTo //重定向的地址

自定义过滤器，根据输入的关键词，全文搜索，如果有对应的结果那就让它变成红色背景 ``` var app = angular.module('wsscat', []); app.controller('filterCtrl', function($scope, $filter, $sce) { var html = "123"; //刚进入时候显示的DOM结构 $scope.htmlSced = $sce.trustAsHtml(html) $scope.makeRed = function() { $scope.html = $filter("wsscat")(html, $scope.red); $scope.htmlSced =...