0

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

我想在 onsenui 模态中数据绑定一个元素，如下所示：

<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>

...控制器

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

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

有人有什么想法吗？

干杯:)

4

1 回答 1

3

我认为问题可能是因为模态在控制器之外。如何尝试将其放入控制器中，如下所示：

<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>

让我知道发生什么事。

于 2014-08-07T03:40:28.287 回答