0

我有一个简单的 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;
  }

  }]);
4

1 回答 1

0

我可以在 Onsen UI 1.0.4 中重现。一种解决方案是使用外部跨度标签 st

<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>
于 2014-07-29T07:44:42.440 回答