javascript - شرح - bootstrap




Angular.js: تعيين ارتفاع العنصر عند تحميل الصفحة (6)

أنا AngularJS مبتدئ. أريد إنشاء شبكة (باستخدام ng-grid ) يعتمد الارتفاع على ارتفاع النافذة ، أي. $('.gridStyle').height($(window).height() - 100);

لقد كتبت التوجيه:

app.directive('resize', function($window) {

    return function(scope, element) {

        function applyHeight() {
            scope.height = $window.innerHeight;
            $('.gridStyle').height(scope.height - 100);
        }

        angular.element($window).bind('resize', function() {
            scope.$apply(function() {
                applyHeight();
            });
        });

        applyHeight();
    };
});

يعمل هذا بشكل جيد عندما أقوم بتغيير حجم نافذة المتصفح ولكن لا يتم تطبيق النمط عندما يتم تحميل الموقع لأول مرة. أين يمكنني وضع رمز لتثبيط الارتفاع؟


اقتراح مع مقتطف السؤال ، انتهى بي الأمر مع التركيز على تغيير حجم الشبكة بعد تحميل البيانات.

HTML:

<div ng-grid="gridOptions" class="gridStyle"></div>

التوجيه:

angular.module('myApp.directives', [])
    .directive('resize', function ($window) {
        return function (scope, element) {

            var w = angular.element($window);
            scope.getWindowDimensions = function () {
                return { 'h': w.height(), 'w': w.width() };
            };
            scope.$watch(scope.getWindowDimensions, function (newValue, oldValue) {

                // resize Grid to optimize height
                $('.gridStyle').height(newValue.h - 250);
            }, true);

            w.bind('resize', function () {
                scope.$apply();
            });
        }
    });

المتحكم:

angular.module('myApp').controller('Admin/SurveyCtrl', function ($scope, $routeParams, $location, $window, $timeout, Survey) {

    // Retrieve data from the server
    $scope.surveys = Survey.query(function(data) {

        // Trigger resize event informing elements to resize according to the height of the window.
        $timeout(function () {
            angular.element($window).resize();
        }, 0)
    });

    // Configure ng-grid.
    $scope.gridOptions = {
        data: 'surveys',
        ...
    };
}

الحل الخاص بي إذا كانت شبكة ng تعتمد على العنصر الأصل (div ، التخطيط):

توجيهات

myapp.directive('sizeelement', function ($window) {
return{
    scope:true,
    priority: 0,
    link: function (scope, element) {
        scope.$watch(function(){return $(element).height(); }, function(newValue, oldValue) {
            scope.height=$(element).height();
        });
    }}
})

عينة HTML

<div class="portlet  box grey" style="height: 100%" sizeelement>
    <div class="portlet-title">
        <h4><i class="icon-list"></i>Articles</h4>
    </div>
    <div class="portlet-body" style="height:{{height-34}}px">
        <div class="gridStyle" ng-grid="gridOrderLine" ="min-height: 250px;"></div>
    </div>
</div>

ارتفاع 34: 34 هو إصلاح ارتفاع div العنوان الخاص بي ، يمكنك إصلاح ارتفاع الأخرى.

إنه توجيه سهل ولكنه يعمل بشكل جيد.


صادفت مشاركتك بينما كنت أبحث عن حل لنفس المشكلة بنفسي. لقد وضعت الحل التالي باستخدام توجيه يعتمد على عدد من المشاركات. يمكنك تجربتها هنا (حاول تغيير حجم نافذة المتصفح): http://jsfiddle.net/zbjLh/2/

رأي:

<div ng-app="miniapp" ng-controller="AppController" ng-style="style()" resize>
    window.height: {{windowHeight}} <br />
    window.width: {{windowWidth}} <br />
</div>

مراقب:

var app = angular.module('miniapp', []);

function AppController($scope) {
    /* Logic goes here */
}

app.directive('resize', function ($window) {
    return function (scope, element) {
        var w = angular.element($window);
        scope.getWindowDimensions = function () {
            return { 'h': w.height(), 'w': w.width() };
        };
        scope.$watch(scope.getWindowDimensions, function (newValue, oldValue) {
            scope.windowHeight = newValue.h;
            scope.windowWidth = newValue.w;

            scope.style = function () {
                return { 
                    'height': (newValue.h - 100) + 'px',
                    'width': (newValue.w - 100) + 'px' 
                };
            };

        }, true);

        w.bind('resize', function () {
            scope.$apply();
        });
    }
})

لقد كنت أصلاً تعمل في وحدة تحكم ( http://jsfiddle.net/zbjLh/ ) ، ولكن من القراءة اللاحقة وجدت أن هذا غير مبرر من منظور Angular ، لذلك قمت الآن بتحويله لاستخدام توجيه.

الأهم من ذلك ، لاحظ العلامة true في نهاية وظيفة "المشاهدة" ، لمقارنة مساواة الكائن بإرجاع getWindowDimensions (إزالة أو التغيير إلى خطأ إذا لم تستخدم كائنًا).


لتجنب التحقق من كل دورة ملخص ، يمكننا تغيير ارتفاع div عندما يتغير ارتفاع النافذة.

http://jsfiddle.net/zbjLh/709/

<div ng-app="miniapp" resize>
  Testing
</div>

.

var app = angular.module('miniapp', []);

app.directive('resize', function ($window) {
    return function (scope, element) {
        var w = angular.element($window);
        var changeHeight = function() {element.css('height', (w.height() -20) + 'px' );};  
            w.bind('resize', function () {        
              changeHeight();   // when window size gets changed             
        });  
        changeHeight(); // when page loads          
    }
})

$(document).ready(function() {
       scope.$apply(function() {
                applyHeight();
            });
});

هذا يضمن أيضًا أن جميع النصوص قد تم تحميلها قبل تنفيذ البيانات. إذا كنت لا تحتاج إلى أنه يمكنك استخدام

$(window).load(function() {
       scope.$apply(function() {
                applyHeight();
            });
});

angular.element(document).ready(function () {
    //your logic here
});






angularjs