javascript - Angular.js: ページの読み込み時に要素の高さを設定する

Question

私は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();
    };
});

これは、ブラウザー ウィンドウのサイズを変更するときにうまく機能しますが、サイトが初めて読み込まれたときにスタイルが適用されません。高さを初期化するコードをどこに置くことができますか?

Answer 1

自分で同じ問題の解決策を探していたときに、あなたの投稿に出くわしました。多数の投稿に基づくディレクティブを使用して、次のソリューションをまとめました。ここで試すことができます (ブラウザ ウィンドウのサイズを変更してみてください): 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 の戻りオブジェクトの等価性を比較するために、'watch' 関数の末尾にあるフラグに注意してください (オブジェクトを使用していない場合は、削除するか false に変更してください)。

Answer 2

すべてのダイジェスト サイクルのチェックを避けるために、ウィンドウの高さが変更されたときに 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          
    }
})

Answer 3

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

Answer 4

次のプラグインが必要なようです： https ：//github.com/yearofmoo/AngularJS-Scope.onReady

基本的に、スコープまたはデータがロードされた後にディレクティブコードを実行する機能、つまり$scope。$whenReadyを提供します。

Answer 5

matty-jの提案と質問のスニペットを組み合わせて、データが読み込まれた後のグリッドのサイズ変更に焦点を当てたこのコードになりました。

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',
        ...
    };
}

Answer 6

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

これにより、ステートメントの実行前にすべてのスクリプトがロードされていることも保証されます。必要ない場合は、使用できます

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