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’的值。