onsen-ui 상태를 업데이트하는 방법은 무엇입니까?

Question

간단한 onsen-ui 샘플 페이지가 있습니다. 온천 UI 1.0.4와 함께 Monaca (http://monaca.mobi)에 내장되어 있습니다.

페이지에 두 개의 onsen-ui 버튼 (ons-button)이 포함되어 있으며, 표시 여부는 각도 j를 통해 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

I은 ​​온천 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>