javascript - onsenui 模态数据绑定(bind)

Question

不确定这是一个 Angular 问题还是一个 onsenui 问题，但这里是......

我想对 onsenui 模式中的元素进行数据绑定(bind)，如下所示:

<ons-modal var="modalUpload">
    <ons-icon icon="cog" spin="true"></ons-icon>
    <div>
        <div>{{status}}</div>
    </div>
</ons-modal>

<ons-page ng-controller="someController">
    <ons-toolbar>
        <div class="left">
            <ons-back-button>Back</ons-back-button>     
        </div>
        <div class="center">Some Section</div>
    </ons-toolbar>

    <ons-row>
        <ons-col align="center">
            <div class="content-padded">
                <div>{{status}}</div>
            </div>
            <div class="content-padded">
                <ons-button modifier="large" ng-click="upload()">Submit</ons-button>
            </div>  
        </ons-col>
    </ons-row>
</ons-page>

... Controller

function someController($scope, $http) {
    $scope.status = 'init';
    $scope.upload = function() {
        $scope.status('test test test');
        modalUpload.show();
    }
};

调用 $scope.upload() 后，$scope.status 会更新。 View 中有两个对 {{status}} 的引用，一个在模态中，一个在页面中...设置 $scope.status 时，ons-page 中的引用按预期工作，但ons- 中的引用模态没有。

大家有什么想法吗？

干杯:)

Answer 1

我认为问题可能是因为模态位于 Controller 之外。尝试将其放入 Controller 中怎么样，如下所示:

<ons-page ng-controller="someController">
    <ons-modal var="modalUpload">
        <ons-icon icon="cog" spin="true"></ons-icon>
        <div>
            <div>{{status}}</div>
        </div>
    </ons-modal>
    <ons-toolbar>
        <div class="left">
            <ons-back-button>Back</ons-back-button>     
        </div>
        <div class="center">Some Section</div>
    </ons-toolbar>

    <ons-row>
        <ons-col align="center">
            <div class="content-padded">
                <div>{{status}}</div>
            </div>
            <div class="content-padded">
                <ons-button modifier="large" ng-click="upload()">Submit</ons-button>
            </div>  
        </ons-col>
    </ons-row>
</ons-page>

让我知道发生了什么。