AngularJs(十一)--服務（二）$anchorScroll/$cacheFactory/$interpolate服務
阿新 • • 發佈：2019-01-25
$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’的值。