窗口大小调整指令

我试图resize,当窗口调整后,环顾四周,似乎使用指令是最好的解决scheme。

模板:

<div elHeightResize ng-view ng-style="{ height: windowHeight }"></div> 

指示:

 myApp.directive('elheightresize', ['$window', function($window) { return { link: function(scope, elem, attrs) { scope.onResize = function() { var header = document.getElementsByTagName('header')[0]; elem.windowHeight = $window.innerHeight - header.clientHeight; } scope.onResize(); angular.element($window).bind('resize', function() { scope.onResize(); }) } } }]) 

虽然我可以在scope.onResizeloggingelem.windowHeight ,但它似乎并不适用于ngStyle

我还可以俯视吗?

编辑:

<div ng-view resize style="height: {{ windowHeight }}px">

这个解决scheme似乎工作,仍然感兴趣的是为什么使用ngStyle不工作。

6 Solutions collect form web for “窗口大小调整指令”

我想你忘了通过调用scope.$apply();来触发摘要循环scope.$apply();scope.onResize方法的末尾

无论如何,我用下面的指令(从这里拿走),这对我有用:

尝试打开debugging视图并更改视图高度:Demo Fiddle

 app.directive('resize', function ($window) { return function (scope, element, attr) { var w = angular.element($window); scope.$watch(function () { return { 'h': w.height(), 'w': w.width() }; }, function (newValue, oldValue) { scope.windowHeight = newValue.h; scope.windowWidth = newValue.w; scope.resizeWithOffset = function (offsetH) { scope.$eval(attr.notifier); return { 'height': (newValue.h - offsetH) + 'px' //,'width': (newValue.w - 100) + 'px' }; }; }, true); w.bind('resize', function () { scope.$apply(); }); } }); 

和用法:

  <div ng-style="resizeWithOffset(165)" resize notifier="notifyServiceOnChage(params)" > /** ... */ </div> 

虚拟控制器方法用法:

 $scope.notifyServiceOnChage = function(){ console.log($scope.windowHeight); }; 

[编辑]

这里是通过使用innerHeight没有jQuery库的演示

演示3 小提琴

由于我们使用指令,所以我们总是可以通过改变指令内部元素的高度来进行一些DOM操作。

例:

 var app=angular.module('App', []); app.directive('elheightresize', ['$window', function($window) { return { link: function(scope, elem, attrs) { scope.onResize = function() { var header = document.getElementsByTagName('header')[0]; elem.windowHeight = $window.innerHeight - header.clientHeight; $(elem).height(elem.windowHeight); } scope.onResize(); angular.element($window).bind('resize', function() { scope.onResize(); }) } } }]) 

现场示例: http : //jsfiddle.net/choroshin/FJvyb/

自从你问起你已经有一段时间了,你似乎已经得到了你的解决方法…但是你也会问为什么ng-style不起作用:

ng-style,来自Angular文档

expression式是一个对象,其键是CSS样式名称和值是这些CSS键的对应值。

所以在你的ng风格的例子中,你提供了height : 375; (也就是说,如果windowHeight评估为375),那不是一个合适的值。

它应该像你在你的解决方法,并有单位。

windowHeight =($ window.innerHeight – header.clientHeight)+“px”;

里面的链接function给

 scope.onResize = function() { var header = document.getElementsByTagName('header')[0]; elem.windowHeight = $window.innerHeight - header.clientHeight; } $window.onresize = function(){scope.onResize();scope.$apply();} 

CoffeeScript中最简单的一个:

 app.directive "applyOnResize", ($window) -> ($scope, $element) -> $element($window).bind("resize", $scope.$apply) 

同样的Javascript 。

这里是另一个版本没有使用angular度$手表,只是想看看窗口大小的变化:

 function resize () { var windowHeight = window.innerHeight, windowWidth = window.innerWidth; scope.windowHeight = windowHeight; scope.windowWidth = windowWidth; console.log('w.innerHeight', windowHeight); console.log('w.innerWidth', windowWidth); //** If want to apply style on element, can do something like: var elemStyle = { width: windowWidth + 'px', height: windowHeight + 'px' }; element.css(elemStyle); } resize(); //** On resize window.onresize = function () { resize(); scope.$apply(); } //** Destroy scope.$on('$destory', function () { window.off('resize') }); 

小提琴

  • Angular JS如何与Google Closure相关?
  • AngularJs:重新加载页面
  • 为什么我们需要点击?
  • 如何在一个Angularexpression式中将stringparsing为Int?
  • 在ui-routerparsing过程中应用加载微调器
  • 使用jquery / javascript调用angularjs函数
  • 在我的html中使用rootScopevariables
  • 在启动angular度应用程序时执行代码
  • 使用ng-click添加和删除angularJs中的类
  • 如何延迟AngularJS即时search?
  • 如何将数据作为表单数据而不是请求有效载荷发布?