Angular.js 客户端高度
Posted
技术标签:
【中文标题】Angular.js 客户端高度【英文标题】：Angular.js Client height 【发布时间】：2015-08-13 11:08:29 【问题描述】：我有一个 angular.j 应用程序，它有一个视图和一个指令。使用的各种视图具有不同的客户端高度。我正在尝试在视图上放置默认背景，而各种视图具有不同的页面高度。
要在屏幕上放置背景，我需要知道客户端窗口的高度，即背景设置的最小高度。视图的高度，如果大于客户端高度，则背景需要扩展以覆盖额外的高度。
观点： index.html
<body ng-app="myApp">
<div main-container></div>
<script src=......></script>
</body>
视图控制器 js/app.js
var myApp = angular.module('myApp', ['ngRoute']);
myApp
.config(['$routeProvider', function($routeProvider)
$routeProvider
.when('/',
templateUrl: 'views/home.html'
)
.otherwise(redirectTo: '/'
);
]);
主页视图 意见/home.html
<div style="height: 2000px">
<p>Home View content</p>
</div>
主容器的视图指令 js/directives/main.js
myApp.directive('mainContainer', ['$window', function($window)
return
link: function(scope, elem, attrs)
scope.onResize = function()
var header = document.getElementsByClassName('main-container')[0];
elem.windowHeight = $window.innerHeight - header.clientHeight - 80;
$(elem).height(elem.windowHeight);
scope.onResize();
angular.element($window).bind('resize', function()
scope.onResize();
)
])
view 指令不会获取视图的高度，它会在页面重新调整大小和刷新时获取客户端窗口高度。我还想获取视图高度，以便可以将容器背景的高度设置为客户端高度或视图高度，以较大者为准。
我想做的是获取视图的高度，在 home.html css 中设置，有没有办法做到这一点？
请帮忙。
【问题讨论】：
我认为main-container 指令应该放在ng-view 元素上..会解决你的问题。
这很有用，我认为我的例子坏了。进一步研究它。
【参考方案1】：
我建议您将指令属性放在ng-view 元素上，您的指令也需要进行一些更改。为了调用高度计算函数scope.onResize，您需要在element.on('load') 上调用它，这也将确保每次视图更改都会调用scope.onResize 函数。
指令
myApp.directive('mainContainer', ['$window', function($window)
return
link: function(scope, elem, attrs)
scope.onResize = function()
var header = document.getElementsByClassName('main-container')[0];
elem.windowHeight = $window.innerHeight - header.clientHeight - 80;
$(elem).height(elem.windowHeight);
scope.onResize();
angular.element($window).bind('resize', scope.onResize);
//below function will call on view change in ng-view
element.on('load', function()
$scope.$apply(scope.onResize);
)
])
【讨论】：
以上是关于Angular.js 客户端高度的主要内容，如果未能解决你的问题，请参考以下文章
调整 ui-view 元素的高度[Angular.js Angular UI Router]
将 svg 拟合到 angular.js 中的背景图像 div
对于 CORS 错误，我还需要在客户端（Angular js）进行配置吗？