angularJS 指令封装回到顶部示例详解

关于angularJS如何回到顶部，还是直接code吧！

1.构建指令，使用registerDirective构建指令添加到内部的hasDirectives对象内，以方便后面在全局查找指令的时候进行匹配。

/**
**回到顶部
**/ 

define(["app"], function (app) { 

  app().registerDirective("backToTop", function () {
    return {
      restrict: "E",
      link: function (scope, element, attr) {
        var e = $(element);
        $(window).scroll(function () {         //滚动时触发
          if ($(document).scrollTop() > 300)     //获取滚动条到顶部的垂直高度,到相对顶部300px高度显示
            e.fadeIn(300)
          else
            e.fadeOut(200);
        });
        /*点击回到顶部*/
        e.click(function () {
          $('html, body').animate({         //添加animate动画效果
            scrollTop: 0
          }, 500);
        });
      }
    };
  });
});

注：

registerDirective 是$CompileProvider的方法，主要就是把内建指令添加到内部的hasDirectives对象内，以方便后面在全局查找指令的时候进行匹配。

指令从html的角度，可以认为指令名字是一个标识符，可以作为元素名（E），元素属性（A）,注释（M），类名（C）出现在html中；而从JavaScript的角度，则可以认为是返回的一个规范化的有特殊意义的指令对象。

link函数创建可以操作dom的指令，签名如下：

link:function(scope,element,attrs){};

scope在其内部作用域注册监听器的作用域。

element代表实例元素,指使用此指令的元素。在postLink函数中我们应该只操作此 元素的子元素,因为子元素已经被链接过了。

attrs 代表实例属性,是一个由定义在元素上的属性组成的标准化列表,可以在所有指 令的链接函数间共享。会以JavaScript对象的形式进行传递。 2. 将定义的 backToTop 指令对象在页面调用。

2.在页面调用backToTop指令

<back-to-top class="back_top" title="返回顶部">
<i class="fa fa-angle-up"></i>
</back-to-top>

注：

restrict - EACM的子集的字符串，它限制directive为指定的声明方式。如果省略的话，directive将仅仅允许通过属性声明：

E - 元素名称： <back-to-top></back-to-top>

A - 属性名： <div back-to-top</div>

C - class名： <div class=”back-to-top”></div>

M - 注释 ： <!-- back-to-top -->

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Angularjs使用指令做表单校验的方法

    前言 通常,使用angular做表单验证,一般都是把验证规则单独写为service,然后通过依赖注入的方式调用.在个别情况下,例如用户注册表单,需要根据用户输入给出不同提示信息,使用service略显不合适宜,所以可以采用指令的方式. 简易表单 如下为一个简易表单,有四项提示信息,依据状态呈现.校验规则为数字,大写字母,小写字母至少出现两项,通过正则配合ng-pattern能够实现相同的效果,此处仅为引入指令校验,不做深究.其中,user-validator为自定义指令. <form class

  • AngularJS内置指令

    指令,我将其理解为AngularJS操作HTML element的一种途径. 由于学习AngularJS的第一步就是写内置指令ng-app以指出该节点是应用的根节点,所以指令早已不陌生. 这篇日志简单记录了一些内置指令,先使用起来,再谈一些有趣的东西. 内置指令 所有的内置指令的前缀都为ng,不建议自定义指令使用该前缀,以免冲突. 首先从一些常见的内置指令开始. 先列出一些关键的内置指令,顺便简单说说作用域的问题. ng-model 将表单控件和当前作用域的属性进行绑定,这么解释似乎也不太正确.

  • AngularJS自定义指令实现面包屑功能完整实例

    本文实例讲述了AngularJS自定义指令实现面包屑功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-CN" ng-app="myApp"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"

  • AngularJS框架的ng-app指令与自动加载实现方法分析

    本文实例分析了AngularJS框架的ng-app指令与自动加载实现方法.分享给大家供大家参考,具体如下: ng-app是angular的一个指令,代表一个angular应用(也叫模块).使用ng-app或ng-app=""来标记一个DOM结点,让框架会自动加载.也就是说,ng-app是可以带属性值的.如果想要实现自动加载,那么就不能让ng-app带有属性值. <html> <body ng-app> <div>div1:{{1+3*2}}</

  • AngularJS动态菜单操作指令

    前言  在我们创建一个angularJS应用的时候,菜单往往往是不可或缺的元素之一.也许在我们静态菜单的时候不会发现在指令中操作菜单收缩.折叠展开没有任何问题,因为我们在操作之前,页面元素渲染已经完成,所以在指令里面通过element查找目标元素可以成功.但是一旦我们的菜单的数据不是静态而是通过后台接口加载动态数据渲染,我们会发现本来在静态写好的指令操作,在转变为动态数据加载之后,怎么也没法查找到想要的目标元素. 遇到如此问题,开始觉得好奇葩的,当然这也是吐槽一下,还是得好好解决问题的,痛定失痛

  • Angularjs自定义指令实现三级联动 选择地理位置

    Angularjs自定义指令实现三级联动 选择地理位置

    Angularjs自定义指令实现三级联动效果,先上图 代码 <html lang="zh-CN" ng-app="myApp"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport&quo

  • AngularJS实现的回到顶部指令功能实例

    本文实例讲述了AngularJS实现的回到顶部指令功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="

  • AngularJS中的指令全面解析(必看)

    AngularJS中的指令全面解析(必看)

    说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJS这个框架的指令系统,本人也是初学,查阅了一些资料,要是有一些说的不好的地方,万望指出. 指令作为AngularJS中最为重要的部分,所以这个框架本身也是自带了比较多的的指令,但是在开发中,这些指令通常不能满足我们的需要,所以我们也是需要自定义一些指令的.那么一个AngularJS指令在HTML代码

  • Angularjs 动态添加指令并绑定事件的方法

    这两天学习了angularjs 感觉指令这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 先说使用场景,动态生成DOM元素并绑定事件,非常常见的一种场景,用jq实现效果: var count=0; $("#test").on("click",function(event){ if(event.target.tagName.toLowerCase()=="input") return; count++; var html="&

  • AngularJS学习笔记之基本指令(init、repeat)

    AngularJS学习笔记之基本指令(init.repeat) <h3>ng-init初始化变量</h3> <div ng-init="name='aurora';age='18'"> <p ng-bind="name+','+age"></p> <p>{{name+','+age}}</p> <p ng-bind="name"></p>

  • 详解angularJs指令的3种绑定策略

    今天,我来谈谈angularJs指令的3种绑定策略. 公司最近大量使用angularJs做单页面应用,就免不了使用angularJs的一些组件,而有的组件网上有现成的,不必操心,而有的就得自食其力,先前对指令这一块的封装一直理解的不够,故每次使用directive时抽象性都做得不好,往往移植性很差,而要将抽象做好,就不得不使用指令中的隔离作用域,而光有隔离作用域又不能做好前后文的通信问题,要解决通信的问题,就要使用指令中的绑定,正好最近要用,顺便就整理了一些关于指令中的3种绑定策略,并谈了一些自

随机推荐