1

Onsen ui にモーダルまたはダイアログを挿入するにはどうすればよいですか?

index.html

<ons-screen>
<ons-navigator ng-controller="Principal" title="Lista DC" right-button-icon="fa fa-lg fa-bars" on-right-button-click="novoProduto()">

プリンシパル.js

function Principal($scope, Data){
    $scope.items = Data.items;  

    $scope.showDetail = function(index){
        var selectedItem = Data.items[index];
        Data.selectedItem = selectedItem;
        $scope.ons.navigator.pushPage('detail.html', { title : selectedItem.title });
    }

    $scope.novoProduto = function(){
        $.mobile.changePage( "page.html", { role: "dialog" } );
    }
}
4

4 に答える 4

5

お使いのバージョンはわかりませんが、これは新機能の可能性があります。

しかし、あなたはただすることができます:

<ons-button id="show-modal" class="ng-isolate-scope button effeckt-button button--light slide-left" modifier="light" onclick="modal.show('modal')">
   <span class="label ons-button-inner">
     <span class="ng-scope">Open Modal</span>
   </span>
   <span class="spinner button__spinner button--light__spinner"></span>
</ons-button>


<ons-modal var="modal">
<ons-button onclick="modal.hide()">Close</ons-button>
</ons-modal>

非常にシンプル - ドキュメント: http://onsenui.io/guide/components.html#ons-modal

于 2014-09-13T14:13:50.630 に答える
2

温泉UI HTML

<ons-modal ng-click="modal.hide()" var="modal">
   <br>
   <br>Invalid Username or Password.
   <br>
</ons-modal>

モーダル表示する温泉JS

modal.show();
 //where modal is the var used in ons-modal tag
于 2015-03-02T13:22:15.720 に答える