如何更新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狀態？

回答

相關問題