이오니아 모달을 이온 탭 내부에서 보임

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을 호출하려고합니다. 또한 각 탭에서 호출 할 수있는 모달에 대해 하나의 컨트롤러 만 만들고 싶습니다. 이것이 가능한가? 어떻게 될 것인가?

또한 모달에 개체 목록을 표시 할 예정입니다. 개체를 선택하면 탭의 내용이 변경됩니다. 내가 모달이 아닌 다른 것을 시도 할 수있는 더 쉬운 방법이 있다면 알려주게.

감사합니다. 마이크는

---

더 내가 이온에 새로 온 사람과 분명히 나는 ​​핵심 개념을 누락

명확합니다. 아래 코드에서 다른 컨트롤러에있는 메서드를 호출하는 방법을 알지 못합니다. 예를 들어 아래 코드에서 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

좋아, 나는 비디오 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 
    } 
    });