$anchorScroll
錨點跳轉服務。
錨點跳轉:在html中,指定錨點,頁面跳轉到相應位置。
在angularJs中提供這種錨點跳轉的服務,直接通過這樣的方法就能實現錨點跳轉。
<pre>
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#parent div{width:300px;height: 300px;border:1px #000 solid;margin:20px;}
#parent ul{width:200px;position:fixed;top:0;right:0;}
</style>
<script src="js/angular.min.js"></script>
<script >
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope','$location','$anchorScroll',function($scope,$location,$anchorScroll){
$scope.change = id =>{
//console.log(id);
//在有了$anchorScroll服務後,hash值的改變就能使頁面跳轉到對應的div位置
$location.hash(id);
};
}]);
</script>
</head>
<body>
<div id="parent" ng-controller= "Aaa">
<ul>
<li ng-repeat="id in [1,2,3,4,5]" ng-click="change('div'+id)">{{id}}aaa</li>
</ul>
<!--ng-attr-id動態添加id屬性-->
<div ng-repeat="id in [1,2,3,4,5]" ng-attr-id="div{{id}}">{{id}}</div>
</div>
</body>
</html>
</pre>
這樣就實現了錨點跳轉,運行效果如下:
- 存在的問題:
此時會有個問題,當hash值爲div4,頁面也跳到id會該值的div上;但是此時若滾動鼠標滾輪使頁面回到div1,再次點擊使hash值爲div4,
發現頁面並沒有跳到div4。 - 原因:
此時地址欄中的hash值一直沒有變化,所以不會自動發生跳轉 解決方法:
添加手動執行跳轉方法$anchorScroll(),如下所示;<pre> <script > var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope','$location','$anchorScroll',function($scope,$location,$anchorScroll){ $scope.change = id =>{ //console.log(id); $location.hash(id); $anchorScroll(); }; }]); </script> </pre>
$cacheFactory
angularJs獨有的,作用是angualarJs下的緩存操作方式;緩存對於代碼優化是非常有用的。
info()
打印緩存的相關信息var m1=angular.module("myApp".[]); m1.controller("Aaa['$scope','$cacheFactory',function ($scope,$cacheFactory){ var cache = $cacheFactory('myCache');//第一個參數爲緩存id名稱 console.log(cache.info()); }]);
運行結果如下圖所示:
從圖中可看到,打印出一個對象,包含我們設置的緩id名稱,及“size”緩存長度;目前沒有緩存任何數
據,所以緩存長度爲0.
put(key.value)
設置緩存數據var m1=angular.module("myApp".[]); m1.controller("Aaa"['$scope','$cacheFactory',function($scope,$cacheFactory){ var cache = $cacheFactory('myCache'); cache.put("name"."張三"); cache.put("age",20); console.log(cache.info()); }]);
運行結果如下圖所示:
在設置了緩存信息後,此時緩存長度就變爲2了。get(key)
獲取指定的緩存信息,cache.get("name")
remove(key)
刪除指定緩存信息
緩存對象的參數
- 第一個參數:緩存對象的id名稱
第二個參數:配置capacity
var m1=angular.module("myApp".[]); m1.controller("Aaa",['$scope','$cacheFactory', function($scope,$cacheFactory{ var cache = $cacheFactory('myCache',{capacity:2}); //第二個參數代表將緩存長度設置爲2 cache.put("name"."張三"); cache.put("age",20); cache.put("sex","男"); console.log(cache.info()); /*console.log(cache.get('name')); cache.remove("name"); console.log(cache.get('name'));*/ }]);
運行結果如下圖所示:
從圖中可以看出,此時size=2,但事實上總共設置了3條緩存數據,原因是我們設置了
capacity=2限制了緩存大小隻能爲2
$log
angularJs的日誌服務,方便進行調試。
- log() 類似console.log()方法
<pre>
var m1=angular.module("myApp".[]);
m1.controller("Aaa",['$scope','$cacheFactory','$log',function($scope,$cacheFactory,$log){
$log.log('hello');//打印出'hello'
}]);
</pre>
info()
warn()
error()
$log.error('hello');
,會打印出一個錯誤信息的效果,如下圖所示:
$interpolate
它其實是插值服務的一種方式
<pre>
<!doctype html ng-init="myApp">
<head>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
var m1=angular.module("myApp".[]);
m1.controller("Aaa",['$scope','$interpolate',function($scope,$interpolate){
$scope.$watch('body',function(newBody){
if (newBody) {
var temp = $interpolate(newBody);
$scope.showText = temp({name:$scope.name});
}
});
}]);
</script>
</head>
<body>
<div ng-controller="Aaa">
<input type="text" ng-model="name"/>
<textarea ng-model="body"></textarea>
<p>{{showText}}</p>
</div>
</body>
</html>
</pre>
運行結果如下圖所示:
操作過程:在頁面中的input輸入框中輸入’hello’,然後textarea中輸入’{{name}}’,p標籤中就會顯示
textarea解析’name’的值。