`

Angularjs自定义指令计算浏览器高度

 
阅读更多
<!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>


效果:


  • 大小: 14.1 KB
0
0
分享到:
评论

相关推荐

    angularjs-utilities:希望对AngularJS有用的指令,提供程序,过滤器等

    rcForm-此模块包含与表单相关的所有自定义指令,提供程序,过滤器等。 rcSubmit-此伪指令模仿标准的ngSubmit伪指令,但是如果表单无效,则取消Submit事件。 它还跟踪是否尝试过表单提交。 rcVerifySet-此伪指令...

    精通AngularJS part1

    第8章创建自定义指令213 81什么是AngularJS指令214 理解内置指令214 在HTML标签中使用指令215 82指令的编译生命周期215 83为指令编写单元测试217 84定义指令218 85使用指令修改按钮样式219 编写一个按钮指令...

    CoursesDirectiveExercise:简单的学生名册单页应用程序,允许用户添加、删除和更新学生和课程。 这个应用程序是与 AngularUI 路由器的练习。 添加了自定义指令以增加功能

    添加了自定义指令以增加功能。 设置说明 克隆这个 git 仓库 在浏览器中加载 index.html。 版权所有 :copyright: 2015,Daniel Toader、Cynthia Wilhelm 和 Bojana Skarich 许可证: 使用的技术 HTML5 CSS3 jQuery...

    AngularJS HTML编译器介绍

    AngularJS称这种行为扩展为“指令” HTML在编写静态页面时,有很多声明式的结构来控制格式。比如你要把某个内容居中,你不必告诉浏览器“去找到窗口的中点位置,然后跟内容的中间结合”。你只需要添加一个 align=”...

    angular-media-player:包装的AngularJS指令或者标签展示方法和属性来操纵您的播放器

    AngularJS指令,该指令包装&lt;audio&gt;或&lt;video &gt;标记公开方法和属性来操纵播放器 github页面上的示例: : 弃用:开发停滞 该库的用户数量超出了我最初开发时的预期。 我对此感到非常高兴,但这意味着它...

    AngularJs每天学习之总体介绍

    这周末在家呆了两天,正好中午闲暇时间继续分享Angularjs相关,今天主要分享Angularjs总体介绍及数据绑定部分内容,下面直接进入主题。 1、基本概念:  AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML...

    Freelancer-AngularJS

    图像和图标是硬编码的,但是当您将鼠标悬停在这些图标上时,该站点使用自定义指令为这些图标添加 CSS 样式或描述性覆盖。 设置说明 克隆这个 git 仓库 在浏览器中加载 index.html。 版权所有 :copyright: 2015, ...

    nicks-flicks:先进的AngularJS代码审查

    网站还具有一个“夜视”自定义指令,该指令可更改CSS,以便观看者在夜间可以更轻松地阅读该网站。 设置 克隆此存储库 在项目目录中启动python服务器。 (python -m SimpleHTTPServer) 直接浏览器到localhost:...

    浅谈AngularJs 双向绑定原理(数据绑定机制)

    将设计转换成浏览器能理解的语言,便是html和css主要做的工作。而将数据显示在页面上,并且有一定的交互效果(比如点击等用户操作及对应的页面反应)则是js主要完成的工作。很多时候我们不可能每次更新数据便刷新...

    freelancer-clone:角度指令实践

    图像和图标是硬编码的,但是当您将鼠标悬停在这些图标上时,该站点使用自定义指令为这些图标添加 CSS 样式或描述性覆盖。 设置说明 克隆这个 git 仓库 在浏览器中加载 index.html。 版权所有 :copyright: 2015, ...

    angular-directives

    在 AngularJS 中练习使用自定义指令 使用的技术 Javascript 使用和编辑 要使用该应用程序,请克隆存储库。 在您选择的浏览器中打开index.html 。 版权所有 (c) 2015 Tom Mertz 和 Brian Kropff 特此授予任何人免费...

    angular-textbox.io:用于 Angular 的 Textbox.io。 不再维护。 请使用https

    ##Usage 实现这个自定义指令非常简单明了。 ####将 Textbox.io 文件添加到您的项目 Textbox.io 本身有一组文件,这些文件需要在您的应用程序中可用,以便指令正常运行。 当您下载 Textbox.io 时,您需要将...

    ng-materialize:用于Materialize框架的本机AngularJS组件

    这些指令倾向于简化而不是自定义,并且旨在坚持对Google的Material Design进行严格的解释。 该项目删除了Materialize的jQuery,Velocity.js和自定义JavaScript依赖项,但需要ngAnimate和Waves(Materialize的隐藏...

    exhibitsjs:博物馆展览在AngularJs中的应用

    可以使用Angular.js路由,自定义指令和样式来定义备用展览模板。应用程式基础要求该项目使用 。 要使用展览生成器应用,您需要在系统上安装以下软件。要求 :使用NodeJS网站上提供的安装程序。 :将安装程序用于您...

    cyTree:treetreeview的angular.js模块

    树+ AngularJS 根据MIT许可授权的代码。 该插件使您可以轻松创建tree(treeview),并且可以专注于数据。 兼容性 使用现代浏览器(Chrome / Firefox / Safari / IE9 +)。 树使用自定义图标(纯css),并且图标...

    angular-blockly

    更改变量时将添加回调以允许提供自定义对话框而不是使用浏览器条目。 IO 支持 JSON,而不是用于保存设计的 XML。 ** 注意 ** 现在 blockly 已经转移到 github,我可能会尝试将这些功能中的一些添加到 blockly ...

Global site tag (gtag.js) - Google Analytics