2

横向きで表示する必要がある Web アプリがあります。

innerWidthこれを行うために、とをチェックする関数を作成しましたinnderHeight。幅が高さよりも大きい場合は、幸せな日です。resizeこれは、ページをロードするときに完全に機能しますが、イベントが発生したときに方向も確認する必要があります。

だから私のコードの流れは -

  1. resizeイベント呼び出しのトリガー時$scope.getOrienttion()
  2. 現在の向きを計算し、結果を返す
  3. $scope.getOrienttion()を使用して の値の変化を監視し、 の値をwatch更新します。$scope.orientation

上記の手順 1 と 2 は正常に機能しているように見えますが、watch変更は検出され$scope.getOrienttion()ず、ページの読み込み時にのみ起動されます。私は何か間違ったことをしているに違いありません。誰でも問題を見つけるのを手伝ってくれますか。

関連するAngularJSは次のとおりです-

christmasApp.controller('bodyCtrl', function($scope, $window){

    angular.element($window).bind('resize', function(){
        console.log('Event triggered');
        $scope.getOrientation();
    });

    $scope.getOrientation = function(){

        var w = $window.innerWidth,
            h = $window.innerHeight;
        var orientation = (w > h) ? 'landscape' : 'portrait'
        console.log('Function triggered - ' + orientation)
        return (w > h) ? 'landscape' : 'portrait';

    };

    $scope.$watch($scope.getOrientation, function(newValue, oldValue){
        $scope.orientation = newValue;
        console.log('Watch triggered - ' + newValue);
    }, true);

});

そして、これは、値に応じて条件付きクラスが設定されたHTMLです$scope.orientation（おそらく関係ありませんが、念のため）-

<body <?php body_class(); ?> data-ng-controller="bodyCtrl">

    <div id="orientationMask" data-ng-class="{visible: orientation != 'landscape'}">
        <p>Please turn your device to the <b>landscape</b> orientation.</p>
    </div>

    { Additional code, obscured by the mask if it is show... }

</body>
4

2 に答える 2

2

イベントgetOrientationからの呼び出しはコードを実行するだけですが、何かが変更されたことを意味するわけではありません。そのため、ダイジェスト サイクルを実行することを angular に伝えるために電話する必要があります。ダイジェスト サイクル angular を呼び出した後、すべての が評価され、ウォッチャー関数が評価されます。resizegetOrientation$apply()$scope$watcher

実際には、イベントgetOrientationからのメソッド呼び出しは、resizeスコープ レベルのバインドに関連することは何もしていないようです。getOrientationそこで何もしていないコードを呼び出しているように見えるので、そこからそのメソッドを削除できます。

コード

angular.element($window).bind('resize', function(){
    console.log('Event triggered');
    $scope.getOrientation(); //you could remove this method, as its not modifying any scope
    //will run digest cycle, and the watcher expression will get evaluated
    $scope.$apply(); //you could also use $timeout(function(){}) here run safe digest cycle.
});
于 2015-12-05T16:18:15.617 に答える
1

このような orientationchange イベントを聞いてみませんか?

    window.addEventListener("orientationchange", function() {
            switch(window.orientation){  
            case -90:
            case 90:
                $rootScope.orientation = "landscape";
                break; 
            default:
                $rootScope.orientation = "portrait";
            break; 
            };

    }, false);
于 2015-12-05T16:34:09.067 に答える