Question

我有这个scrollBar的自定义指令。

'use strict';
     define([
        'angular',
         './module',
         ], 
      function (angular, directives) {
        directives.directive('ScrollPort', [
      '$window',
      function ($window) {

         return {
            restrict: 'A',
            link: function (scope, element) {           
               function resizePort(element) {               
                  var minHeight = $(window).height() - element.offset().top;                  
                  element.css('min-height', minHeight + 'px');
                  element.css('max-height', minHeight + 'px');

               }

               resizePort(element);

               angular.element($window).bind('resize', function () {
                  resizePort(element);
               })
            }
         }
      }
   ])

});

我在html页面中使用的这个指令

<div class="row full-panle-body col-xs-12 col-md-12 col-sm-12 col-
    lg-12 scrollable" **scroll-port** ng-show="dataReady">

        <form name="addUserForm" class="form-horizontal" novalidate>

            <!-- Identity Provider -->
            <div class="row control-group"
                ng-class="{error:addUserForm.selectIdentityProvider.$dirty && !addUserForm.selectIdentityProvider.$valid, 
                     success:addUserForm.selectIdentityProvider.$valid}">
                <div class="col-xs-4 col-sm-4 col-md-3 col-lg-3 label-right">
                    <label class="control-label">{{::'label.user.identityProvider'|translate}}
                    </label> <label class="asterisk">*</label>
                </div>
                <div class="col-xs-8 col-sm-8 col-md-9 col-lg-9 controls">
                    <select id="selectIdentityProvider" name="selectIdentityProvider"
                        ui-select2="select2ProviderSettings"
                        ng-change="changedValue(addUser.identityProvider)"
                        ng-model="addUser.identityProvider" required autofocus>
                        <option></option>
                        <option value="SE">{{::'label.identifier.se'|translate}}</option>
                        <option value="UAA">{{::'lable.identifier.customer'|translate}}</option>
                    </select> <span class="help-block"
                        ng-show="addUserForm.selectIdentityProvider.$dirty && addUserForm.selectIdentityProvider.$error.required">{{::'error.required'|translate}}</span>
                </div>
            </div>

当我运行我的应用程序页面时，滚动条有时会出现，有时它不会出现。

当滚动条进入时，所有字段的值都是

var minHeight = $(window).height() - element.offset().top;  

$(window).height()= 669
element.offset().top = 175
minheight is= 493.27272033691406

滚动条未进入的情况下，所有字段的值都是

$(window).height()= 669
element.offset().top= 701
minheight is=  -32

价值即将消极，这就是滚动条未来的原因。如果有人可以帮助我。提前致谢

element.offset（）。top属性无法正常工作

0 个答案: