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

 
具体如下:
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. C# 解析bt种子

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.C ...

  2. 显示linux开机时间的脚本

    最初的讨论是linux吧吧友@九十钩圈凯_ 发布的主题贴<加到自启动可以看开机时间的玩意> 并给出显示开机秒数的shell语句 [shell] [ $_UTED = 0 ] || noti ...

  3. Visual Studio 2012使用水晶报表Crystal Report

    原文:Visual Studio 2012使用水晶报表Crystal Report SAP在 2013年1月14日 released SAP Crystal Reports,developer ver ...

  4. javascript 正则介绍

    1.正则直接量字符 \o NUL字符(\u000)\t 制表符\n 换行符(\u000A)\v 垂直制表符\f 换页符\xnn 由16进制nn指定的拉丁字符\uXXXX 由16进制XXXX指定的unc ...

  5. Google Hacking的实现以及应用

    Google Hacking其实并算不上什么新东西,在早几年我在一些国外站点上就看见过相关的介绍,但是由于当时并没有重视这种技术,认为最多就只是用来找找未改名的mdb或者别人留下的webshell什么 ...

  6. Android项目---TouchListener

    public static interface View.OnTouchListener android.view.View.OnTouchListener Known Indirect Subcla ...

  7. c#生成word文档

    参考:http://blog.163.com/zhouchunping_99/blog/static/7837998820085114394716/ 生成word文档 生成word文档 view pl ...

  8. 转载Mvc的多层架构

    Mvc的多层架构 分享一个Mvc的多层架构,欢迎大家拍砖斧正   多层架构是什么? 多层架构是开发人员在开发过程当中面对复杂且易变的需求采取的一种以隔离控制为主的应对策略,关于多层架构的标准,我认为有 ...

  9. HFile文件解析异常解决

    1. 场景说明 需要对离线的 HFile 进行解析,默认可以使用如下的方式: hbase org.apache.hadoop.hbase.io.hfile.HFile -f $HDFS_PATH -p ...

  10. C# 求精简用一行代码完成的多项判断 重复赋值

    C# 求精简用一行代码完成的多项判断 重复赋值 哈哈,说实话,个人看着这么长的三元操作也麻烦,但是我也只想到了这样三元判断句中执行方法体能够写到一行,追求的终极目的是,用一行实现这个过程,而且简单,由 ...