最近工作需要增强用户体验,项目经理说下拉框架用户体验太差,于是乎我开始想了如下指令。这个指令可以让用户点击的时候把下拉或者其他的响应显示的东西不会因为屏幕的滚动而看不见,也就是让用户看见他想看见的。

 
具体如下:
define(['angular'], function(){
var commonDirectives = angular.module("commonDirectives", []);
commonDirectives.directive("toLocate", function () {
        return {
            restrict: "AE",
            scope:{
                tid:"@",
                pscope:"@"
            },
            link: function (scope, element, attrs) {
                element.bind("click", function (event) {
                    event.stopPropagation();
                    var scroll_offset = $("#"+scope.tid).offset();
                    if(scope.pscope == undefined){
                        $("body,html").animate({
                            scrollTop: scroll_offset.top
                        }, 1000);
                    }else{
                        $("."+scope.pscope).animate({
                            scrollTop: scroll_offset.top
                        }, 1000);
                    }
                })
            }
        }
    })
})

结构-行为-样式-AngularJs--指令实现 手动触发响应到页面指定位置的更多相关文章

  1. 结构-行为-样式-angularJs 指令实现滚动文字

    最近在做XX项目的大屏展示页面,有一个表格需要用到这个滚动效果,于是就写了个指令,记录下,共同学习. Html代码: <td word-roll tword="item"&g ...

  2. 结构-行为-样式-angularJs 指令解决IE下无PlaceHolder的问题

    最近项目开发的时候遇到一个头疼的问题,在测试IE兼容性的时候,发现placeholder在IE下无效.查网上说也是有各种解决方案,但是都不是我想要的,于是决定自己写一个.思路:placeHolder是 ...

  3. 结构-行为-样式-angularJs笔记

    0.关于Ng-app   通过ngApp指令来引导Angularjs应用是一种简洁的方式 ,适合大多数情况.在高级开发中,例如使用脚本装载应用,您也可以使用Bootstrap手动引导AngularJs ...

  4. 结构-行为-样式 - Angularjs 环境下Ztree结合JqueryUI实现拖拽

    新的项目中有一个需求是要求客户标签可以自定义,于是就想到了客户体验,让客户自己拖拽标签进行组合查询.但是理想很丰满,现实很骨感.一开始就遇到了问题,各个插件之间的结合问题,折腾一翻之后终于实现了这个功 ...

  5. 结构-行为-样式-angularJs ngAnimate(Js实现)

    声明 页面 Js 注意事项 官方链接 一.声明 注意animate的版本要与Angular的一致. <script src="jquery.1.9.1.min.js"> ...

  6. AngularJs指令(一)

    AngularJs应用现在越来越流行了,谷歌都与微软合作支持AngularJS2.0,这是要逆天了,说明AngularJs将来大势所趋.最近想跳槽,又重新拾起了AngluarJs(之前由于缺少项目应用 ...

  7. AngularJS 指令生命周期 complie link

    AnguarJS指令从解析到生效一共会经历Inject.Compile.Controller加载.Pre-link.Post-link这几个主要阶段. 一.AngularJS指令执行过程 1.加载An ...

  8. AngularJS 指令解析(二)

    AngularJS 指令解析(二) 第一篇我们讲过了作用域(scope)这块内容,现在我们进入正题,讲AngularJS的指令. 什么是指令? 这里我们引用官方的一句话: Custom directi ...

  9. AngularJS 指令解析(一)

    AngularJS 指令解析(一) 前言 笔者AngularJS接触时间差不多是两年多,虽然这两年多AngularJS版本日新月异,但是笔者的版本是比较老的1.4.3,一方面是自己对这个版本比较熟悉, ...

随机推荐

  1. 王立平--string.Empty

    String.Empty 字段 .NET Framework 类库 表示空字符串.此字段为仅仅读.命名空间:System 程序集:mscorlib(在 mscorlib.dll 中) protecte ...

  2. Web神器WebStorm 8.0测试版发放(慧都独家)

    WebStorm 8.0测试版的发放,标志着WebStorm规划构建的发展成熟. 此次WebStorm 8.0测试版的主要变化是支持高级的AngularJS和集成Spy-js JavaScript跟踪 ...

  3. ylb:SQLServer常用系统函数-字符串函数、配置函数、系统统计函数

    原文:ylb:SQLServer常用系统函数-字符串函数.配置函数.系统统计函数 ylbtech-SQL Server:SQL Server-SQLServer常用系统函数 -- ========== ...

  4. ubuntu下java和tomcat安装配置

    oracle下载jdk-7u51-linux-i586.tar.gz sudo cp Downloads/jdk-7u51-linux-i586.tar.gz /usr/local/java //拷贝 ...

  5. JS中的prototype(转载)

    在研究别人写的js图像处理算法时,发现其中脚本中大量使用prototype,很难读明白,就网上查了下资料发现这篇文章很易懂,就转载如下: 1 原型法设计模式 在.Net中可以使用clone()来实现原 ...

  6. SpringMVC源码

    SpringMVC源码分析系列 说到java的mvc框架,struts2和springmvc想必大家都知道,struts2的设计基本上完全脱离了Servlet容器,而springmvc是依托着Serv ...

  7. CSS绘制无图片的气泡对话框

    <div class="qipao_contianer">            <div class="qipao_content yj3" ...

  8. python包

    有个伟人说过: python的学习很大一部分取决与你对第三方包的熟悉和掌握程度! virtualenv virtualenv用于创建独立的Python环境,多个Python相互独立,互不影响,它能够: ...

  9. robotlegs2.0框架实例源码带注释

    robotlegs2.0框架实例源码带注释 Robotlegs2的Starling扩展 有个老外写了robotleges2的starling扩展,地址是 https://github.com/brea ...

  10. 4 MySQL与PHP连接

    目录: 1. 连接概述2. 创建php文件进行MySQL连接3. 查看连接效果 1. 连接概述 上文讲述了LAMP开发模型,并且使用AppServ进行安装.这时候就要体现优势了.本节将介绍在直接使用P ...