如何更新 onsen-ui 状态？答案

【问题标题】：How to update onsen-ui states?如何更新 onsen-ui 状态？
【发布时间】：2014-07-25 10:17:50
【问题描述】：

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

页面包含两个onsen-ui按钮（ons-button），它们的可见性通过angular 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;
  }

  }]);

【问题讨论】：

我在 Onsen UI 1.1.0 中测试，无法重现您的问题。您使用 Onsen UI 1.0.4 或更早版本吗？我签入 iOS 7.1 和 Android 4.2。
这是 Onsen UI 1.0.4，在 Monaca (monaca.mobi) 内部运行。很抱歉遗漏了这个版本：（我还更新了我的原始帖子以包含此信息。

标签： onsen-ui monaca

【解决方案1】：

我可以在 Onsen UI 1.0.4 中重现。一种解决方案是使用外部跨度标签 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>

【讨论】：

感谢您的帮助！