zoukankan      html  css  js  c++  java
  • 13-$location以及$interpolate等服务

    但是在angularjs应用的网页中,提供一个$anchorScroll  用来做锚点的功能。比较简单,直接看例子:

    <!DOCTYPE HTML>
    <html ng-app="myApp">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>$anchorScroll</title>
    <style type="text/css">
        #parent div{300px;height:500px;border:1px solid #000;border-radius:2px;margin:20px;}
        #parent ul{200px;position:fixed;top:0;right:0;}
        #parent ul li{margin:5px 0 ;}
    </style>
    <script type="text/javascript" src="js/angular.min.js"></script>
    </head>
    <body>
    
    <div id="parent" ng-controller="Aaa">
        <ul>
            <li ng-repeat="id in [1,2,3,4,5,6]" ng-click="change('div'+id)">{{id}}</li>
        </ul>
        <div ng-repeat="id in [1,2,3,4,5,6]" ng-attr-id="div{{id}}">{{id}}</div>
    </div>
    
    <script type="text/javascript">
    
    var m1 = angular.module('myApp',[]);
    m1.config(['$anchorScrollProvider',function($anchorScrollProvider){
        $anchorScrollProvider.disableAutoScrolling();    //禁止跳转,控制区需要手动设置跳转$anchorScroll();
    }]);
    m1.controller('Aaa',['$scope','$location','$anchorScroll',function($scope,$location,$anchorScroll){
        $scope.change = function(id){
            console.log(id);
            $location.hash(id);
            $anchorScroll();
        };
    }]);
    
    </script>
    </body>
    </html>

    点击右边的菜单,页面即定位到指定的DOM元素上。注意在m1的config上我们绑定了anchorScrollProvider,所以就不能更改地址栏触发描点定位了。需要的话就直接将$anchorScrollProvider.disableAutoScrolling();注释掉就好了。

     Angular的缓存服务,$cacheFactory:

    <script type="text/javascript">
    var m1 = angular.module('myApp',[]);
    m1.controller('Aaa',['$scope','$cacheFactory',function($scope,$cacheFactory){
        
        var cache = $cacheFactory('myCache',{
            capacity : 2    //参数长度
        });
        cache.put('name','xiecg');    //设置
        cache.put('age',19);
        //cache.remove('name');        //删除
        console.log(cache.info());    //返回大小、id、一些缓存的参数
        //console.log(cache.get('name'));    //获取
    
    
    }]);
    </script>

    这里唯一要注意的就是配置的capacity属性,假设参数的长度是1的话,数据也只能添加一条,再添加的不能获取。

    日志服务:

    <script type="text/javascript">
    
    var m1 = angular.module('myApp',[]);
    m1.controller('Aaa',['$scope','$log',function($scope,$log){
    
        $log.log(window);    //日志
        $log.info('info');    //提示
        $log.warn('warn');    //警告
        $log.error('error');//报错
    
    }]);
    
    </script>

    插值服务:

    <div ng-controller="Aaa">
        <input type="text" ng-model="name">
        <textarea ng-model="body"></textarea>
        <p>{{showText}}</p>
    </div>
    <script type="text/javascript">
    
    var m1 = angular.module('myApp',[]);
    m1.controller('Aaa',['$scope','$interpolate',function($scope,$interpolate){
    
        $scope.$watch('body',function(newBody){    //监听textarea输入的变化,返回newBody输入的内容
            if(newBody){
                var temp = $interpolate(newBody);
                //从输入框中拿到对应的值
                $scope.showText = temp({
                    name : $scope.name
                });
            };
        });
    
    }]);
    
    </script>

    我们在textarea中输入{{name}}会在下面的div中显示input输入框的内容。

    学习笔记,如有不足,请指正!转载请保留原文链接,谢谢。

    最後,微博求粉,谢谢。

  • 相关阅读:
    Spring 进行junit单元测试时,出现method ‘initializationError’ 错误
    反射注解
    Maven
    spring 和 spingmvc 和 mybatis 的集成应用
    SpringMVC:文件上传,文件下载,SpringMVC的拦截器,poi组件导出excel文件
    SpringMVC:SpringMVC执行流程和原理,RESTful风格支持,请求中文乱码问题, 响应传值方式, 转换JSON数据
    Spring和MyBatis的整合
    Spring的事务管理
    Spring:AOP, 面向切面编程,JDK的动态代理,CGLIB代理,Spring的AOP技术(底层就是JDK动态代理和CGLIB代理技术)
    Spring注解配置:@Component,@Controller,@Service,@Repository,@Scope,@Autowired,@Qualifier,@Resource@Value
  • 原文地址:https://www.cnblogs.com/xiaoxie53/p/5076961.html
Copyright © 2011-2022 走看看