如何更新onsen-ui状态？

Question

我有一个简单的onsen-ui示例页面。它是在Monaca (http://monaca.mobi)中构建的，带有Onsen 1.0.4。

该页面包含两个onsen-ui按钮(ons-按钮)，它们的可见性通过角js绑定javascript方法。按钮是相互排斥的，这意味着当按钮1可见时，按钮2必须被隐藏--反过来也是如此。

单击任一按钮时，将更改内部标志，并显示另一个按钮。

问题是:当页面第一次加载时，按钮的可见性无法正确应用。只有当用户手动单击其中一个按钮时，它才能工作。

作为一个反例，页面上也有两个普通的HTML按钮--这些按钮在页面加载后立即正确工作。

你能给我提点建议吗？加载页面时，是否必须手动强制刷新？

非常感谢您提前！

HTML代码：

<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代码：

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;
  }

  }]);

Answer 1

我可以在Onsen 1.0.4中复制。一种解决方案是使用外部span标记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>