イオニックモーダルをイオンタブ内から表示

Question

タブのビュータイトル、ion-nav-buttonsの内部からモーダルを開くにはどうすればいいですか？例えば：

<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を呼びたいと思います。また、各タブから呼び出すことができるモーダルのコントローラーを1つだけ作成したいと思います。これは可能なのでしょうか？

また、私はモーダルのオブジェクトのリストを表示する予定です。オブジェクトが選択されると、タブの内容が変更されます。私がモーダル以外の試みを達成するためのより簡単な方法があるかどうかを教えてください。

ありがとうございます！ マイクは

---

さらに私はイオンに新たなんだと明らかに私は重要な概念が欠落してい

明確にします。以下のコードでは、別のコントローラに存在するメソッドを呼び出す方法がわかりません。たとえば、以下のコードでは、私は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> 

タブ-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> 

モーダルtemplate.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

[OK]を、私はビデオ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(); 
    }; 
}); 

サービス：以下

は、関連するコードです。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(); 
    }; 
}); 

タブ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> 

モーダル-template.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 
    } 
    });