如何将 Modal 添加到复杂的 Ionic 应用程序？答案

【问题标题】：How do I add a Modal to a complex Ionic app?如何将 Modal 添加到复杂的 Ionic 应用程序？
【发布时间】：2015-02-12 01:36:57
【问题描述】：

我有一个 ionic 应用，其导航风格与此 codepen 类似：

http://codepen.io/calendee/pen/JdtuG

HTML：

    <title>Ionic Template</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>
</head>
<body>

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

<script id="entry.html" type="text/ng-template">
    <ion-nav-bar animation="nav-title-slide-ios7"
                 type="bar-positive"
                 back-button-type="button-icon"
                 back-button-icon="ion-ios7-arrow-back">
    </ion-nav-bar>

    <ion-view title="{{navTitle}}" class="bubble-background">

        <ion-content has-header="true" padding="true">

            <h1>Entry Page!</h1>

            <a class="button button-positive" ng-click="signIn()" ui-sref="main.home">Sign In</a>

        </ion-content>

    </ion-view>

</script>

<script id="tabs.html" type="text/ng-template">
    <ion-view title="{{navTitle}}"  left-buttons="leftButtons">

        <ion-tabs tabs-type="tabs-icon-only">
            <ion-tab title="Tab 1" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
                <ion-content has-header="true" padding="true">
                    <h2>Tab 1 Content</h2>
                </ion-content>
            </ion-tab>

            <ion-tab title="Tab 2" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
                <ion-content has-header="true" padding="true">
                    <h2>Tab 2 Content</h2>
                </ion-content>
            </ion-tab>

            <ion-tab title="Tab 3" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
                <ion-content has-header="true" padding="true">
                    <h2>Tab 3 Content</h2>
                </ion-content>
            </ion-tab>
        </ion-tabs>


    </ion-view>
</script>

<script id="mainContainer.html" type="text/ng-template">

    <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">Side Menu</div>
            </header>
            <ion-content has-header="true">
                <ul class="list">
                    <a ui-sref="entry" class="item">Back To Entry Page</a>
                    <a ui-sref="main.home" class="item" ng-click="toggleMenu()">Home</a>
                    <a ui-sref="main.tabs" class="item" ng-click="toggleMenu()">Tabs</a>
                </ul>
            </ion-content>
        </ion-side-menu>

    </ion-side-menus>


</script>


<script id="home.html" type="text/ng-template">
    <ion-view title="{{navTitle}}" left-buttons="leftButtons">

        <ion-content has-header="true" padding="true">

            <h1>Home Page!</h1>

            <a ui-sref="main.info" class="button button-positive">Info</a>

        </ion-content>

    </ion-view>

</script>

<script id="info.html" type="text/ng-template">
    <ion-view title="{{navTitle}}" left-buttons="leftButtons">

        <ion-content has-header="true" padding="true">

            <h1>Info Page!</h1>

        </ion-content>

    </ion-view>

</script>

</body>
</html>

Javascript：

angular.module('ionicApp', ['ionic'])

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

        $stateProvider
            .state('entry', {
                url : '/entry',
                templateUrl : 'entry.html',
                controller : 'EntryPageController'
            })

            .state('main', {
                url : '/main',
                templateUrl : 'mainContainer.html',
                abstract : true,
                controller : 'MainController'
            })

            .state('main.home', {
                url: '/home',
                views: {
                    'main': {
                        templateUrl: 'home.html',
                        controller : 'HomePageController'
                    }
                }
            })

            .state('main.info', {
                url: '/info',
                views: {
                    'main': {
                        templateUrl: 'info.html',
                        controller : 'InfoPageController'
                    }
                }
            })

            .state('main.tabs', {
                 url: '/tabs',
                 views: {
                     'main': {
                         templateUrl: 'tabs.html',
                         controller : 'TabsPageController'
                     }
                 }
            })

        $urlRouterProvider.otherwise('/entry');
    }])

    .controller('MainController', [ '$scope', function($scope) {
        $scope.toggleMenu = function() {
            $scope.sideMenuController.toggleLeft();
        }
    }])

    .controller('EntryPageController', [ '$scope', '$state', function($scope, $state) {
        $scope.navTitle = 'Entry Page';

        $scope.signIn = function() {
            $state.go('main.home');
        }
    }])

    .controller('HomePageController', [ '$scope', '$state', function($scope, $state) {
        $scope.navTitle = 'Home Page';

        $scope.leftButtons = [{
            type: 'button-icon icon ion-navicon',
            tap: function(e) {
                $scope.toggleMenu();
            }
        }];
    }])

    .controller('InfoPageController', [ '$scope', '$state', function($scope, $state) {
        $scope.navTitle = 'Info Page';

        $scope.leftButtons = [{
            type: 'button-icon icon ion-navicon',
            tap: function(e) {
                $scope.toggleMenu();
            }
        }];
    }])

    .controller('TabsPageController', [ '$scope', '$state', function($scope, $state) {
        $scope.navTitle = 'Tab Page';

        $scope.leftButtons = [{
            type: 'button-icon icon ion-navicon',
            tap: function(e) {
                $scope.toggleMenu();
            }
        }];
    }])

我已经搜索并尝试了许多不同的东西，但我似乎无法弄清楚如何将模式添加到其中一个页面。我可以在一个只有一种导航类型的更简单的应用程序中做到这一点，但是这个 codepen 有两种类型的导航（侧菜单和某些页面上的选项卡），并且控制器的拆分方式与我习惯的不同，我不知道在哪里初始化 $ionicModal。我试过放入主控制器和主页控制器，但如果我这样做了，我会得到一个空白页。任何帮助将不胜感激！

对不起，如果我做错了。我平时不常来这里。

【问题讨论】：

我可以知道哪个页面需要模态窗口吗？
@prabhu 对于这个例子，我猜是主页，但实际上我只是不明白在哪里放置模态控制器、主页控制器、其父控制器、主控制器或其他地方？跨度>

标签： javascript angularjs ionic-framework ionic

【解决方案1】：

您应该发布没有成功的尝试。然后我可以提供更多帮助。但是，我的猜测是您指定的模板路径不正确。

另外，请不要发布太多代码。其中大部分与问题无关。如果您希望有人花时间提供帮助，请花时间简洁地询问。

这是一个工作模式示例：http://codepen.io/calendee/pen/AHIuh/

    // Load the modal from the given template URL
$ionicModal.fromTemplateUrl('modal.html', function($ionicModal) {
    $scope.modal = $ionicModal;
}, {
    // Use our scope for the scope of the modal to keep it simple
    scope: $scope,
    // The animation we want to use for the modal entrance
    animation: 'slide-in-up'
});

});

然后在您的按钮上（或任何打开模式的按钮）

ng-click="modal.show()"

【讨论】：