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>

标签-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

创建新的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
    }
  });

Answer 2

好的，我通过观看视频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();
    };
});

标签-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>

如果有更简单的方法，请告诉我。谢谢你的帮助Mahesh！

从离子标签内显示离子模态

2 个答案: