从离子选项卡内部显示离子模式

Question

如何从选项卡的视图标题、离子导航按钮中打开模式？例如：

<ion-view view-title="Users">
    <ion-nav-buttons side="primary">
        <button class="button button-icon icon ion-ios-minus-outline" 
            ng-click="openModal()"></button>       
    </ion-nav-buttons>
...

我关注了How to open an Ionic Modal from an Ionic Tab，但它会创建一个选项卡，按下该选项卡会调用 openModal()。我想从标题栏上的按钮调用 openModal。我还想只为可以从每个选项卡调用的模式创建一个控制器。这可能吗？怎么做？

另外请注意，我计划在模态中显示对象列表。当一个对象被选中时，它会改变选项卡的内容。让我知道是否有比模态更简单的方法来完成我正在尝试的事情。

谢谢！ 迈克

---

进一步澄清

我是 Ionic 的新手，显然我错过了一个关键概念。在下面的代码中，我不知道如何调用另一个控制器中存在的方法。比如下面的代码我不知道怎么从 FriendsCtrl 的 openModal 方法中调用 ModalController 的 openModal 方法？请看下面 FriendsCtrl 的 openModal 方法。

这是我的代码...

Tabs.html

<ion-tabs class="tabs-icon-top tabs-color-active-positive">

  <ion-tab title="Home" icon-off="ion-ios-home-outline" icon-on="ion-ios-home" href="#/tab/home">
    <ion-nav-view name="tab-home"></ion-nav-view>
  </ion-tab>

    <!-- Chats Tab -->
    <ion-tab title="Friends" icon-off="ion-ios-people-outline" icon-on="ion-ios-people" href="#/tab/friends">
        <ion-nav-view name="tab-friends"></ion-nav-view>
    </ion-tab>

</ion-tabs>

Tabs-Friends.html

<ion-view view-title="Friends">
    <ion-nav-buttons side="primary">
        <button class="button button-icon icon ion-ios-minus-outline" ng-click="openModal()"></button>
    </ion-nav-buttons>
    <ion-content>
…
    </ion-content>
</ion-view>

模态模板.html

<ion-modal-view>
    <ion-header-bar class="bar-positive">
        <h1 class="title">Ionic Modal</h1>
        <div class="buttons">
            <button class="button button-clear" ng-click="closeModal()">Close</button>
        </div>
    </ion-header-bar>
</ion-modal-view>

Controllers.js

angular.module('starter.controllers', [])

.controller('HomePageCtrl', function ($scope, $window) {
    $scope.openInBrowser = function (URL) {
          $window.open(URL, '_system')
    }
})

.controller('FriendsCtrl', function ($scope, $window, TodoList) {
    …

// breakpoint verifies function called in debugger when the button is pressed. 
// However, I don't know how to call the ModalController’s $scope.openModal from here?

$scope.openModal= function () { 
        $scope.modal.show();// to display ionic modal use it 
}

})
.controller('ModalController', function ($scope, $timeout, $state, $ionicModal) {
     //give same file name as your modal html file
     $ionicModal.fromTemplateUrl('modal-template.html', {
         scope: $scope
     }).then(function (modal) {
         $scope.modal = modal;
     });

    $scope.openModal= function () { 
        $scope.modal.show();// to display ionic modal use it 
    }
     $scope.modal.show();// to display ionic modal use it
     $scope.closeModal = function () {
         $scope.modal.hide();// to hide ionic modal use it
     }
 });

感谢您提供的任何帮助。

Answer 1

好的，我通过观看视频AngularJS - Communicating Between Controllers 解决了我的问题。总之，我创建了一个注入控制器的共享服务。然后控制器使用该服务在控制器之间广播/处理消息。

以下是相关代码：

Controllers.js

angular.module('starter.controllers', [])

.controller('FriendsCtrl', function ($scope, $window, TodoList, GroupService) {

    $scope.openModal = function () {
        GroupService.prepForOpenModal();
    };
    …

})

.controller('TabsCtrl', function ($scope, $ionicModal, GroupService) {

    $scope.modal = null;

    $ionicModal.fromTemplateUrl('templates/modal-template.html', {
        scope: $scope,
        animation: 'slide-in-up'
    }).then(function (modal) {
        $scope.modal = modal;
    });

    $scope.$on('handleBroadcast_OpenModal', function() {
        $scope.modal.show();
    });

    $scope.closeModal = function () {
        $scope.modal.hide();
    };
});

Services.js

angular.module('starter.services', [])

.factory('TodoList', function ($ionicPopup) {
    …
})


.factory('GroupService', function ($rootScope) {
    var GroupService = {};
    GroupService.groupName = '';
    GroupService.groupId = '';

    GroupService.prepForOpenModal = function () {
        $rootScope.$broadcast('handleBroadcast_OpenModal');
    };

    return GroupService;
});

Controllers.js

angular.module('starter.controllers', [])

.controller('FriendsCtrl', function ($scope, $window, TodoList, GroupService) {
    …

    $scope.openModal = function () {
        GroupService.prepForOpenModal();
    };

})

.controller('TabsCtrl', function ($scope, $ionicModal, GroupService) {

    $scope.modal = null;

    $ionicModal.fromTemplateUrl('templates/modal-template.html', {
        scope: $scope,
        animation: 'slide-in-up'
    }).then(function (modal) {
        $scope.modal = modal;
    });

    $scope.$on('handleBroadcast_OpenModal', function() {
        $scope.modal.show();
    });

    $scope.openMyModal = function () {
        $scope.modal.show();
    };

    $scope.closeModal = function () {
        $scope.modal.hide();
    };
});

Tab-friends.html

<ion-view view-title="Friends">
    <ion-nav-buttons side="primary">
        <button class="button button-icon icon ion-ios-minus-outline" ng-click="openModal()"></button>
    </ion-nav-buttons>
    <ion-content>
        …
    </ion-content>
</ion-view>

模态模板.html

<ion-modal-view>
    <ion-header-bar class="bar-positive">
        <h1 class="title">Ionic Modal</h1>
        <div class="buttons">
            <button class="button button-clear" ng-click="closeModal()">Close</button>
        </div>
    </ion-header-bar>
</ion-modal-view>

如果有更简单的方法，请告诉我。 感谢您的帮助马赫什！

Answer 2

创建新的 Html 页面，将此 html 放入文件中。

   <ion-modal-view>
   <ion-header-bar class="bar-positive">
   <h1 class="title">Ionic Modal</h1>
   <div class="buttons">
   <button class="button button-clear" ng-click="closeModal()">Close</button>
  </div>
 </ion-header-bar> 
 </ion-modal-view>

在控制器中

 .controller('FriendsCtrl', function($scope,$timeout,$state,$ionicModal) {
 //give same file name as your modal html file
 $ionicModal.fromTemplateUrl('templates/IonicModal.html', {
    scope: $scope
   }).then(function (modal) {
    $scope.modal = modal;
    });
   $scope.modal.show();// to display ionic modal use it
    $scope.closeModal = function () {
    $scope.modal.hide();// to hide ionic modal use it
    }
  });