Question

不确定这是一个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中的引用 - 莫代尔没有。

有人有任何想法吗？

干杯：）

Answer 1

我认为问题可能是因为模态在控制器之外。如何将其放入控制器内如下：

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

让我知道会发生什么。

onsenui模态数据绑定

1 个答案: