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

 
具体如下:
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. 快速构建Windows 8风格应用2-创建调试应用

    原文:快速构建Windows 8风格应用2-创建调试应用 本篇博文主要介绍的是创建应用时可以选择哪些模版,生成默认的Windows 8风格应用解决方案中含哪些文件,最后是如何调试Windows 8风格 ...

  2. ASP.NET WebForm路由模拟

    一.ASP.NET MVC 路由(一)--- ASP.NET WebForm路由模拟 2014-11-08 11:49 by 郝喜路, 232 阅读, 0 评论, 收藏, 编辑 ASP.NET Web ...

  3. 基于jQuery的上下无缝滚动应用(单行或多行)

    工作中遇到的一个js代码,现在对.trigger('mouseleave'),仍一知半解... <script>$(function(){//单行应用var _wrap=$('ul.lin ...

  4. Asp.net Identity 系列之 怎样修改Microsoft.AspNet.Identity.EntityFramework.IdentityUser 的 Id 字段的数据类型

    这篇博客我们来学习如何将AspNetUsers 表的Id 字段 的类型由nvarchar(128) 改为Int 并且子增长 1.为什么要修改 如果你运行过 Asp.net mvc 示例项目,你好会发现 ...

  5. Hudson+Maven+Svn搭建持续集成环境

    Hudson+Maven+Svn搭建持续集成环境 博客分类: 配置管理 mavenSVNTomcat项目管理配置管理 一.所用开发工具 1.    Hudson: Hudson 是一种革命性的开放源码 ...

  6. Javascript多线程引擎(五)

    Javascript多线程引擎(五)之异常处理 C语言没有提供一个像Java一样的异常处理机制, 这就带来了一个问题, 对于一个子函数中发生异常后, 需要在父函数调用子函数的位置进行Check, 如果 ...

  7. Asp.Net Web Api 接口

    如何让你的 Asp.Net Web Api 接口,拥抱支持跨域访问.   由于 web api 项目通常是被做成了一个独立站点,来提供数据,在做web api 项目的时候,不免前端会遇到跨域访问接口的 ...

  8. DEBUG不能进断点 “exited with code -1073741515”

    需要把相关的DLL文件加入到项目对应的DEBUG路径下 IDE :Qt Creator 系统:Win7

  9. 跨域访问 REST API

    跨域访问 Web Service (REST API) 虽然 JQuery 也能通过授权header实现跨域, 但SharePoint 提供了更简单的方法,它被实现在SP.RequestExecuto ...

  10. C#简单实现贪吃蛇程序(LinQ + Entity)

    做梦想起来的C#简单实现贪吃蛇程序(LinQ + Entity) 最近一直在忙着单位核心开发组件的版本更新,前天加了一个通宵,昨天晚上却睡不着,脑子里面突然不知怎的一直在想贪吃蛇的实现方法.以往也有类 ...