Question

所以，我在这里有一个代码笔链接：http://codepen.io/anon/pen/oXwZmr

在那里，他们将index.html中的所有模板（tabs.html，mainContainer.html，entry.html，...）和js文件中的模板页面的所有控制器组合在一起（MainController，TabsPageController，...）

我想把所有事情分开，所以我确实喜欢index.html，mainController.html mainController.js，tabs.html，tabs.js，app.js。

codepen工作得很好。但我遇到了问题。我的内容落后于标签。

的index.html

SELECT 
    s.*,
    [Total Sales %] = CAST(CAST(s.MonthlySales/t.Total * 100.00 AS DECIMAL(5, 2)) AS VARCHAR(5)) +'%',
    [Quarterly Sales %] = CAST(CAST(s.MonthlySales/q.QtrTotal* 100.00 AS DECIMAL(5, 2)) AS VARCHAR(5)) +'%'
FROM Sales s
CROSS APPLY(
    SELECT Total = SUM(MonthlySales) * 1.0
    FROM Sales
) t
CROSS APPLY(
    SELECT QtrTotal = SUM(MonthlySales) * 1.0
    FROM Sales
    WHERE Quarter = s.Quarter
    GROUP BY Quarter
)q

app.js

<html ng-app="DroidRestClient">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

        <title>Droid Rest Client</title>

        <!--        <link href="http://code.ionicframework.com/0.9.27/css/ionic.min.css" rel="stylesheet">
                <script src="http://code.ionicframework.com/0.9.27/js/ionic.bundle.min.js"></script>-->

        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <link href="css/ionicons.css" rel="stylesheet" type="text/css"/>

        <!--ionic/angularjs js--> 
        <script src="lib/ionic/js/ionic.bundle.js"></script>

        <script src="js/app.js" type="text/javascript"></script>
        <script src="templates/mainContainer/mainContainer.js" type="text/javascript"></script>
        <script src="templates/tabs/tabs.js" type="text/javascript"></script>
    </head>
    <body>

        <!-- ALL VIEW STATES LOADED IN HERE -->
    <ion-nav-view>

    </ion-nav-view>
</body>
</html>

mainContainer.html

angular.module('DroidRestClient', ['ionic', 'DroidRestClient.mainController', 'DroidRestClient.tabsPageController'])

    .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {

        $stateProvider
            .state('main', {
                url : '/main',
                templateUrl : 'templates/mainContainer/mainContainer.html',
                abstract : true,
                controller : 'MainController'
            })
            .state('main.tabs', {
                 url: '/tabs',
                 views: {
                     'main': {
                         templateUrl: 'templates/tabs/tabs.html',
                         controller : 'TabsPageController'
                     }
                 }
            });

        $urlRouterProvider.otherwise('/main/tabs');
    }]);

mainContainer上

<ion-side-menus>
    <ion-pane ion-side-menu-content>
        <ion-nav-bar type="bar-positive"
                     back-button-type="button-icon"
                     back-button-icon="ion-ios7-arrow-back"
                     animation="nav-title-slide-ios7">
        </ion-nav-bar>
        <ion-nav-view name="main">

        </ion-nav-view>
    </ion-pane>

    <ion-side-menu side="left">
        <header class="bar bar-header bar-assertive">
            <div class="title">Settings</div>
        </header>
        <ion-content has-header="true">
            <ul class="list">
                <a ui-sref="main.tabs" class="item" ng-click="toggleMenu()">Tabs</a>
            </ul>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>

tabs.html

angular.module('DroidRestClient.mainController', ['ionic'])
        .controller('MainController', ['$scope', function ($scope) {
                $scope.toggleMenu = function () {
                    $scope.sideMenuController.toggleLeft();
                };
            }]);

tabs.js

<ion-view title="{{navTitle}}"  left-buttons="leftButtons">
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
    <ion-tab title="Request" icon-off="ion-ios-cloud-upload-outline" icon-on="ion-ios-cloud-upload">
        <ion-content has-header="true" padding="true">
            <form ng-submit="doLogin()">
                <div class="list">
                    <div class="item item-divider item-button-right">
                        Url
                    </div>
                    <label class="item item-input">
                        <input type="text" placeholder="enter url">
                    </label>
                    <div class="item item-divider item-button-right">
                        Method
                    </div>
                    <label class="item item-input">
                        <div class="input-label">
                            Method
                        </div>
                        <select>
                            <option selected>GET</option>
                            <option>POST</option>
                            <option>PUT</option>
                            <option>DELETE</option>
                        </select>
                    </label>
                    <div class="item item-divider item-button-right">
                        Parameters
                        <a class="button button-icon icon ion-ios-plus-empty"></a>
                        <button class="button button-positive">
                            <i class="icon ion-ios-plus-empty"></i>
                        </button>
                    </div>
                    <div class="list list-inset">
                        <div class="item">
                            No parameters
                        </div>
                    </div>
                    <div class="item item-divider item-button-right">
                        Headers
                        <a class="button button-icon icon ion-ios-plus-empty"></a>
                        <button class="button button-positive">
                            <i class="icon ion-ios-plus-empty"></i>
                        </button>
                    </div>
                    <div class="list list-inset">
                        <div class="item">
                            No headers
                        </div>
                    </div>
                    <div class="item item-divider item-button-right">
                        Body
                    </div>
                    <label class="item item-input">
                        <textarea placeholder="enter body"></textarea>
                    </label>
                </div>
            </form>
        </ion-content>
    </ion-tab>

    <ion-tab title="Response" icon-off="ion-ios-cloud-download-outline" icon-on="ion-ios-cloud-download">
        <ion-content has-header="true" padding="true">
            <h2>Response</h2>
        </ion-content>
    </ion-tab>
</ion-tabs>

Answer 1

在tabs.html中添加has-header="true"

在示例中; <ion-view title="{{navTitle}}" has-header="true" left-buttons="leftButtons">

我也遇到了同样的问题，对我有用。

Answer 2

给class =＆＃34; has-header＆＃34;离子含量。

<ion-content class="has-header">
</ion-content>

你需要初始化你的角度应用程序 - 请参阅我的示例中的javascript。注意ng-controller和ng-app。

离子：内容落后于导航栏

2 个答案: