angular 1.3.x 笔记 – 随身笔记

https://sdeno.com/wp-content/uploads/2018/11/u39643507382133201787fm26gp0-300x224.jpg

笔记基于angular 1.3.17 ，虽然现在有2.x还听说1.x和2.x是跳崖式的升级，很多方法都不一样了，没办法只能去学习老版本了公司项目是基于老版本开发的。

https://www.bootcdn.cn/angular.js/1.3.17/

以上链接还包括一些扩展功能，例如cookie插件、动画效果插件、类似ajax功能的插件等等

代码总揽：

<body ng-app="phonecatApp">

 <div ng-controller="PhoneListCtrl">
   <li ng-repeat="phone in phones">
     <span>{{phone.name}}</span>
     <span>{{phone.snippet}}</span>
   </li>
 </div>


 <script>
  var phonecatApp = angular.module('phonecatApp', ['infinite-scroll', 'timer']); // 创建module

  phonecatApp.controller('PhoneListCtrl', function ($scope, $http,$rootScope) {
    $scope.phones = [
      {'name': '名字1','snippet': '内容1'},
      {'name': '名字2','snippet': '内容2'},
      {'name': '名字3','snippet': '内容3'}
    ];
  });

 </script>

</body>

效果：

https://sdeno.com/wp-content/uploads/2018/11/ag1.jpg

遮丑

[ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

<body ng-app="phonecatApp" ng-cloak>

全局变量

phonecatApp.controller() 独立的控件之间变量是不能传递，这些需要全局，在任意xx.controller()中都可以调用。

 var phonecatApp = angular.module('phonecatApp', ['infinite-scroll']);
 phonecatApp.run(function($rootScope){  //声明全局
    $rootScope.people ={
       name:'小明',
       age:'12',
       tel:'12233333333'
    };
 });


 phonecatApp.controller('PhoneListCtrl', function ($scope, $http,$rootScope) {
    console.log($rootScope.people.name)  //小明
 });

class判断

 <!--第一种 直接加变量--> 
 <div ng-class="tempClass"></div> 

 <!--第二种 用{{}} 包住的变量表达式--> 
 <div ng-class="{{bClass}}"></div> 

 <!--第三种--> 
 <div ng-class="{'red':num,'green':!num}"></div> 

 <!--第四种--> 
 <div ng-class="{true:'green',false:'red'}[num]"></div> 



app.controller('frist',function($scope){ 
  $scope.tempClass = 'green'; 
  $scope.bClass = "{'red':true,'green':false}" 
  $scope.num = true; 
}

滚动加载

借助插件：https://cdn.bootcss.com/ngInfiniteScroll/1.2.0/ng-infinite-scroll.min.js

<script src="angular.min.js"></script>
<script src="ng-infinite-scroll.min.js"></script>


<div ng-controller="PhoneListCtrl">
 <div class="box" infinite-scroll="loadMore()" infinite-scroll-disabled="scroll_status" infinite-scroll-distance='1'>
    <li ng-repeat="phone in phones">
      <span>{{phone.name}}</span>
      <span>{{phone.snippet}}</span>
    </li>
 </div>
</div>

var phonecatApp = angular.module('phonecatApp', ['infinite-scroll']); // 创建module，这里要注入infinite-scroll插件之后才可以使用其方法
phonecatApp.controller('PhoneListCtrl', function ($scope, $http) {

   $scope.scroll_status=false;

   $scope.loadMore =function () {
      $scope.scroll_status=true;  //滚动到底部，正在加载数据，禁止多次执行
      console.log('到底部了');
   }

});

infinite-scroll //box容器里面的内容滚动到底部的时候会执行loadMore()的函数

infinite-scroll-disabled //默认为false，作用是防止滚动到底部的瞬间可能会造成多次执行loadMore()的时候，值为true时就停止了infinite-scroll的回调，也就是不执行loadMore()了

infinite-scroll-distance //值默认为0时，效果就是内容一定要滚动到底部的时候才会触发函数，如果值越大，会感觉到稍微滚动一点点也会触发到infinite-scroll回调执行loadMore()