AngularJs(十一)--服务（二）$anchorScroll/$cacheFactory/$interpolate服务

最新推荐文章于 2019-09-06 10:14:30 发布

tongwandouQX

最新推荐文章于 2019-09-06 10:14:30 发布

阅读量409

点赞数

分类专栏： angularjs 文章标签： $anchorScroll $cacheFactory $log 自带服务 $interpolate

本文链接：https://blog.csdn.net/qianxing111/article/details/80708476

版权

angularjs 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

$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>

这样就实现了锚点跳转，运行效果如下：
<img src="4.png"/>

存在的问题：
此时会有个问题，当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());
        }]);

运行结果如下图所示：
<img src="1.png">
从图中可看到，打印出一个对象，包含我们设置的缓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());
        }]);

运行结果如下图所示：
<img src="2.png">
在设置了缓存信息后，此时缓存长度就变为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'));*/
        }]);

运行结果如下图所示：
<img src="3.png">
从图中可以看出，此时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>

运行结果如下图所示：
<img src="5.png">