How to update onsen-ui states?

Question

I have a simple onsen-ui sample page. It's built in Monaca (http://monaca.mobi) with Onsen UI 1.0.4.

The page contains two onsen-ui buttons (ons-button), their visibility is bound a javascript method via angular js. The buttons are mutually exclusive, meaning when button 1 is visible, button 2 must be hidden - and the other way around.

When either button is clicked, an internal flag is changed and the other button is shown.

Problem is: the visibility of the buttons is not applied correctly when the page first loads. It only works when the user manually clicks one of the buttons.

As a counter example, there are also two normal HTML buttons on the page - these buttons work correctly as soon as the page is loaded.

Can you give me any advice? Do I have to manually force a refresh when the page is loaded?

Thank you very much in advance!

HTML code:

<div ng-controller="AppCtrl">
  <strong>Click To Toggle</strong> <br>
  <button ng-click="startTracking()" ng-hide="isTrackingRunning()"><strong>On</strong></button>  
  <button ng-click="stopTracking()" ng-show="isTrackingRunning()"><strong>Off</strong></button>         

  <ons-button ng-click="startTracking()" ng-hide="isTrackingRunning()">Start Tracking</ons-button>
  <ons-button ng-click="stopTracking()" ng-show="isTrackingRunning()">Stop Tracking</ons-button>
</div>

JS code:

angular.module('SotraMon', ['onsen.directives'])
 .controller('AppCtrl',['$scope', function($scope){
  var trackingRunning = false;

  $scope.isTrackingRunning = function() {
    console.log("getter called, returning " + trackingRunning);
    return trackingRunning;
  }

  $scope.startTracking = function() {
    trackingRunning = true;
  }

  $scope.stopTracking = function() {
    trackingRunning = false;
  }

  }]);

I test in Onsen UI 1.1.0 and can't reproduce your issue. Do you use Onsen UI 1.0.4 or older version? I check in iOS 7.1 and Android 4.2. — KNaito, Jul 28 '14 at 03:57
It's Onsen UI 1.0.4, running inside Monaca (http://monaca.mobi). Sorry for leaving the version out :( I have also updated my original posting to include this info. — Felix Bucherer, Jul 29 '14 at 05:08

score 0 · Accepted Answer · answered Jul 29 '14 at 07:44

I can reproduce in Onsen UI 1.0.4. One solution is to use external span tag s.t.

<span ng-hide="isTrackingRunning()"><ons-button ng-click="startTracking()">Start Tracking</ons-button></span>
<span ng-show="isTrackingRunning()"><ons-button ng-click="stopTracking()">Stop Tracking</ons-button></span>

How to update onsen-ui states?

1 Answers1