如何更新onsen-ui状态？

我有一个简单的onsen-ui示例页面。它建在Monaca（http://monaca.mobi）与Onsen UI 1.0.4。如何更新onsen-ui状态？

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

    }]);

来源

2014-07-25 Felix Bucherer

我在Onsen UI 1.1.0中测试并且无法重现您的问题。你使用温泉UI 1.0.4或更旧的版本？我检查iOS 7.1和Android 4.2。 – KNaito

它是在Monaca（http://monaca.mobi）内运行的温泉UI 1.0.4。对不起，离开版本:(我也更新了我原来的帖子，包括这个信息。 –

我可以在温泉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>

来源

2014-07-29 07:44:42 KNaito

感谢您的帮助！ –

如何更新onsen-ui状态？

回答

相关问题