angularjs – 窗口调整大小指令

发布时间：2020-12-17 08:43:43 所属栏目：安全来源：网络整理

导读：我试图做一个div调整大小时窗口调整大小，环顾四周后，似乎使用指令是最好的解决方案。模板： div elHeightResize ng-view ng-style="{ height: windowHeight }"/div 指示： myApp.directive('elheightresize',['$window',function($window) { return { lin

我试图做一个div调整大小时窗口调整大小，环顾四周后，似乎使用指令是最好的解决方案。

模板：

<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.onResize中记录elem.windowHeight，它似乎不适用于ngStyle

我还在俯瞰什么吗？

编辑：

< divng-view resize style =“height：{{windowHeight}} px”>

这个解决方案似乎工作，仍然感兴趣的为什么使用ngStyle不工作。

我想你忘了通过调用范围来消化摘要周期。$ apply();在scope.onResize方法的结尾

无论如何，我使用以下指令(从HERE)为我工作：

尝试打开调试视图和更改视图高度：演示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);   
 };

[编辑]

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

演示3Fiddle

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!