Question

使用分割视图导航在多个ons-template上使用我的角度js控制器时遇到问题。

在主页面上运行良好，但是当我在主页面上加载第二个ons-template（使用相同的控制器）时，它根本不起作用。

请帮忙。

`

<ons-split-view
    var="app.splitView"
    secondary-page="menu.html"
    main-page="search.html"
    main-page-width="70%"
    collapse="width 500px">
</ons-split-view>

<ons-template id="menu.html">
    <ons-page style="background-color: white; border-right: 1px solid #ddd;">
        <ons-toolbar>
            <div class="center">Menu</div>
        </ons-toolbar>
        <ons-list>
            <ons-list-item
            modifier="tappable"
            ng-click="app.splitView.toggle(); app.splitView.setMainPage('search.html');">
            <i class="ion-search" style="color: #666"></i>
            &nbsp; Search
            </ons-list-item>
            <ons-list-item
            modifier="tappable"
            onclick="app.splitView.toggle(); app.splitView.setMainPage('mostWanted.html');">
            <i class="ion-person-stalker" style="color: #666"></i>
            &nbsp; Most Wanted
            </ons-list-item>
            <ons-list-item
            modifier="tappable"
            ng-click="app.splitView.toggle(); app.splitView.setMainPage('stolenVehicles.html');">
            <i class="ion-model-s" style="color: #666"></i>
            &nbsp; Stolen Vehicles
            </ons-list-item>
        </ons-list>
    </ons-page>
</ons-template>

<ons-template id="search.html">
    <ons-navigator var="searchNavigator">
        <ons-page ng-controller="searchCtrl">
            <ons-toolbar>
                <div class="center">
                    <i class="ion-search" style="color: #666"></i>
                    &nbsp; Search
                </div>
            </ons-toolbar>
            <div style="text-align: center; padding: 60px 10px 10px 10px;">
                <section style="padding: 8px">
                    <b>Enter ID Number</b>
                </section>
                <section style="padding: 0 8px 8px">
                    <input type="search" class="search-input" placeholder="Enter ID Number..." style="color:black" ng-model="idNumber"></input>
                </section>
                <section style="padding: 0 8px 8px">
                    <ons-button modifier="large" ng-click="getRecords();">Submit</ons-button>
                </section>
            </div>
        </ons-page>
    </ons-navigator>
</ons-template>

<ons-template id="record.html">
    <ons-navigator var="recordNavigator">
        <ons-page ng-controller="searchCtrl">
            <ons-toolbar>
                <div class="center">
                    <i class="ion-clipboard" style="color: #666"></i>
                    &nbsp; Record
                </div>
            </ons-toolbar>
            <div style="text-align: center; padding: 60px 10px 10px 10px;">
                <h3>{{record.id}}</h3>
            </div>
        </ons-page>
    </ons-navigator>
</ons-template>

`

JS：

app.controller（＆＃39; searchCtrl＆＃39;，功能（$ scope，data）{

    $scope.record = null;

    $scope.getRecords = function(){

        for(var x=0; x<data.person.length; x++){

            if($scope.idNumber == data.person[x].id){

                $scope.record = data.person[x];
            }
        }

        if($scope.record == null){

            alert("No Criminal Record Found");
        } else{

            searchNavigator.pushPage('record.html');
            //console.log($scope.record.id);
        } 
    };
});

Answer 1

如果您希望两个页面共享同一个控制器，请在“ons-split-view”的父级而不是每个页面上定义控制器。您可以在div中包装“ons-split-view”。例如;

 <div ng-controller="searchCtrl">
    <ons-split-view
        var="app.splitView"
        secondary-page="menu.html"
        main-page="search.html"
        main-page-width="70%"
        collapse="width 500px">
    </ons-split-view>
</div>

使用具有多个控制器的onsen ui split-view

1 个答案: