结构-行为-样式-AngularJs--指令实现 手动触发响应到页面指定位置

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

具体如下:

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);
                    }
                })
            }
        }
    })
})
时间: 2024-10-08 03:18:24

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

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

新的项目中有一个需求是要求客户标签可以自定义,于是就想到了客户体验,让客户自己拖拽标签进行组合查询.但是理想很丰满,现实很骨感.一开始就遇到了问题,各个插件之间的结合问题,折腾一翻之后终于实现了这个功能,这里记录一下. 首先,在Angularjs+AMD+RequireJs的环境下引入插件: require.config({ baseUrl: "", urlArgs: 'ver=' + (+new Date()), waitSeconds: 0, paths: { 'jqueryUI'

AngularJs指令(一)

AngularJs应用现在越来越流行了,谷歌都与微软合作支持AngularJS2.0,这是要逆天了,说明AngularJs将来大势所趋.最近想跳槽,又重新拾起了AngluarJs(之前由于缺少项目应用,一直都是学了就忘记了),也写写复习的知识点,希望这次能让我对AngularJs的理解更深入透彻. 知识概要 一.什么是指令Directive 二.指令的编译过程及命名方式 二.AngularJS自定义指令的配置参数 二.AngularJS的内置指令有哪些 什么是指令Directive Angula

一招制敌 - 玩转 AngularJS 指令的 Scope (作用域),讲得特别好

学习了AngularJS挺长时间,最近再次回首看看指令这部分的时候,觉得比自己刚开始学习的时候理解的更加深入了,尤其是指令的作用域这部分. 步入正题: 每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部的Controller提供的作用域或者根作用域($rootScope)),还是创建一个新的自己的作用域,当然AngularJS为我们指令的scope参数提供了三种选择,分别是:false,true,{}:默认情况下是false. scope = false 首先我们来看

AngularJS指令中的compile与link函数解析

AngularJS指令中的compile与link函数解析 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. 原文地址 angularjs里的指令非常神奇,允许你创建非常语义化以及高度重用的组件,可以理解为web components的先驱者. 网上已经有很多介绍怎么使用指令的文章以及相关书籍,相互比较的话,很少有介绍compile与link的区别,更别说pre-link与post-lin

angularjs指令中的compile详解

篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你创建非常语义化以及高度重用的组件,可以理解为web components的先驱者. 网上已经有很多介绍怎么使用指令的

JavaScript强化教程——AngularJS 指令

本文为 H5EDU 机构官方 HTML5培训 AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 通过内置的指令来为应用添加功能. AngularJS 允许你自定义指令. AngularJS 指令 AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. ng-app 指令初始化一个 AngularJS 应用程序. ng-init 指令初始化应用程序数据. ng-model 指令把元素值(比如输入域的值)绑定到应用程序. 完整的指令内容可以参阅 An

angularjs 指令—— 绑定策略(@、=、&)

angularjs 指令—— 绑定策略(@.=.&) 引入主题背景:angular 的指令配置中的template可以直接使用硬编码写相应的代码,不过也可以根据变量,进行动态更新.那么需要用到那些变量,因用法的不同,所以需要设置合适的绑定策略. 一.@ 绑定策略 @ 绑定策略,它的作用就是能把指令配置的独立Scope下变量的值等于根据@绑定的指令属性的值.(指令属性的值可以使用表达式,但是得出来的值一定是字符串.) 1.上代码: html代码 <!DOCTYPE html> <h

AngularJS 指令

AngularJS 指令 AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 通过内置的指令来为应用添加功能. AngularJS 允许自定义指令. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. ng-app 指令初始化一个 AngularJS 应用程序. ng-init 指令初始化应用程序数据. ng-model 指令把元素值(比如输入域的值)绑定到应用程序. 实例 <div ng-app="" ng-init=&quo

AngularJS指令

AngularJS指令 通过指令的心属性来扩展HTML. AngularJS指令是扩展的HTML属性,带有前缀ng-. ag-app指令初始化一个AngularJS应用程序. ng-init指令初始化应用程序数据. ng-model指令把元素值绑定到应用程序,如输入域的值. <div ng-app="" ng-init="name='hello world'"> <div><input type="text" ng-