<!DOCTYPE html>

<html ng-app="app">

<head>

<title>柳絮飞祭奠</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is my page">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script type="text/javascript" src="/APP-INF/plugins/angular/angular.js"></script>

</head>

<body>

<div lx-ui-auto="" height-remove="10" style="background-color: red;"></div>

</body>

<script type="text/javascript">

	var app=angular.module("app",[]);

	/**

	 * height-remove 设置窗口高度需要移除的高度值，如移除顶部导航高度50

	 * height-tag    设置是按height还是min-height设置高度值，height才会出现滚动条。

	 */

	app.directive('lxUiAuto', function($window) {

		return {

			restrict : 'A',

			scope : {},

			link : function($scope, $element, $attrs) {

				if($attrs.heightTag==undefined){

					$element.css("min-height", ($window.innerHeight-$attrs.heightRemove) + 'px');

				}else{

					$element.css($attrs.heightTag, ($window.innerHeight-$attrs.heightRemove) + 'px');

				}

			}

		};

	});

</script>

</html>

效果：



Angularjs自定义指令计算浏览器高度的更多相关文章

  1. AngularJs自定义指令详解（1） - restrict

    下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...

  2. AngularJS: 自定义指令与控制器数据交互

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 浅析AngularJS自定义指令之嵌入(transclude)

    AngularJS自定义指令的嵌入功能与vue的插槽十分类似,都可以实现一些自定义内容展现.在开始之前先简单介绍下自定义指令的transclude属性和AngularJS的内置指令ng-transcl ...

  4. angularjs自定义指令Directive

    今天学习angularjs自定义指令Directive.Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Adm ...

  5. angularJs 自定义指令传值---父级与子级之间的通信

    angularJs自定义指令用法我忽略,之前有写过,这里只说一下父子级之间如何传值: 例如: 模块我定义为myApp,index.html定义 <my-html bol-val="bo ...

  6. AngularJs自定义指令详解（6） - controller、require

    在前面文章中提到一旦声明了require,则链接函数具有第四个参数:controller. 可见require和controller是配合使用的. 在自定义指令中使用controller,目的往往是要 ...

  7. 利用angularJs自定义指令（directive）实现在页面某一部分内滑块随着滚动条上下滑动

    最近老大让我一个效果实现在页面某一部分内滑块随着滚动条上下滑动,说明一下我们项目使用技术angularJs.大家都知道,使用jquery很好实现. 那么angular如何实现呢,我用的是自定义指令(d ...

  8. angularJs自定义指令（directive）实现滑块滑动

    最近老大让我一个效果实现在页面某一部分内滑块随着滚动条上下滑动,说明一下我们项目使用技术angularJs.大家都知道,使用jquery很好实现. 那么angular如何实现呢,我用的是自定义指令(d ...

  9. angularJs自定义指令.directive==类似自定义标签

    创建自定义的指令 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名 ...

随机推荐

  1. 实验四：xl命令的常见子命令以及操作

    实验名称: xl命令的常见子命令以及操作 实验环境: 这里我们需要正常安装一台虚拟机,如下图: 我们这里以一台busybox为例,来进行这些简单的常见的操作: 实验要求: 这里我们准备了5个常见操作: ...

  2. react购物车

    import React, { Component } from 'react';   import {Tabs} from './Tabs'   import 'whatwg-fetch'   im ...

  3. Django和SQLAlchemy，哪个Python ORM更好？

    ORM是什么? 在介绍Python下的两个ORM框架(Django和SQLAlchemy)的区别之前,我们首先要充分了解ORM框架的用途. ORM代表对象关系映射.ORM中的每个单词解释了他们在实际项 ...

  4. IntelliJ IDEA 常用设置

    1.idea每次打开项目的设置 2.设置编译器的快捷键  File->Keymap 在列表里面选择快捷键的名称  如果想使用跟Eclipse一样的快捷键,选中Eclipse copy即可 3.滚 ...

  5. Signals的使用(通知)

    https://docs.djangoproject.com/en/2.1/topics/signals/

  6. js：捕获冒泡和事件委托

    一.事件流(捕获,冒泡)   事件流:指从页面中接收事件的顺序,有冒泡流和捕获流. 当页面中发生某种事件(比如鼠标点击,鼠标滑过等)时,毫无疑问子元素和父元素都会接收到该事件,可具体顺序是怎样的呢?冒 ...

  7. uname命令详解

    1.简介: uname命令用于打印当前系统相关信息(内核版本号.硬件架构.主机名称和操作系统类型等). 2.命令语法: uname (选项) 3.选项: -a或--all:显示全部的信息: -m或-- ...

  8. centos7-内核版本降级

    1. 查看内核版本参考命令: [root@localhost ~]# cat /etc/redhat-release CentOS Linux release 7.3.1611 (Core) [roo ...

  9. Python设计模式 - UML - 组件图(Component Diagram)

    简介 组件图又称构建图,用于显示系统各组件及各组件关系的物理视图. 组件图通常包括组件.接口.关系.端口和连接器,用来显示程序代码中相应的模块.源文件或源文件集合之间的依赖和泛化关系. 组件图中的组件 ...

  10. vue 自动识别PC、移动端，并跳转到对应页面

    app.vuehead中添加 <!--自动识别PC.移动--> <script src="static/js/uaredirect.js" type=" ...