Miao February 2016

I want to change ons-toolbar's display when the orientation changed

My code as follows :

<ons-page ng-controller="stockController">
     <ons-toolbar class="DCF"  id="stockToolbar" ng-if = "orientation">
        <div class="left">
            <ons-back-button style="color:white;"></ons-back-button>
        </div> 
        <div class="center" style="font-size:22px;" >Stock</div>
    </ons-toolbar>

     <highchart id="chart1" config="chartConfig" class="span10"></highchart>
</ons-page>

Controller as follows:

if (Math.abs(window.orientation) === 90) {
    $scope.orientation = false;
    $scope.$apply();
} else {
    $scope.orientation = true;
    $scope.$apply();
}
window.onorientationchange = function(){
    if (Math.abs(window.orientation) === 90) {
        $scope.orientation = false;
        $scope.$apply();
    } else {
        $scope.orientation = true;
        $scope.$apply();
    }
} 

I just set the ng-if="false" or ng-if="true" it works fine, but when I run my code, it does not work, the toolbar forever display.

Anybody can help me to solve this problem?

Answers


Murali February 2016

Can you please use the orientation as Boolean type, rather than string with $scope.$digest(); at end of your javascript function. I tried in my local its working.

Thanks

Post Status

Asked in February 2016
Viewed 1,732 times
Voted 4
Answered 1 times

Search




Leave an answer