HTML

q.x=475;
q.y=700;
q.h=50;
q.w=50;

Answer 1

我可以使用$ionicModal

回答您的要求

<强> HTML

  <script id="add-or-edit-cart.html" type="text/ng-template">

        <ion-modal-view>
            <ion-header-bar>
                <h1 class="title">{{ action }} Page</h1>
                <div class="buttons">
                    <button ng-click="deleteCart()" class="button button-icon icon ion-close"></button>
                </div>
            </ion-header-bar>
            <ion-content>
                <div class="list list-inset">
                    <label class="item item-input">
                      Dummy Text
                    </label>

                </div>

            </ion-content>
        </ion-modal-view>

    </script>

将ng-click添加到页脚中的查看购物车

<ion-footer-bar  class="bar-footer btn-footer bar-light">
  <div class="row">
    <div class="col">
      <button ng-click="vm.showCart()" ng-controller="OverviewController as vm" class="button  button-block button-positive"> View cart Page </button>
    </div>
    <div class="col">
      <button class="button  button-block button-calm"> View checkout page </button>
    </div>
  </div>
</ion-footer-bar>

<强> JS

添加以下控制器

.controller('OverviewController', function ($scope, $ionicModal) {
    var vm = this;

    $ionicModal.fromTemplateUrl('add-or-edit-cart.html', {
        scope: $scope,
        animation: 'slide-in-up'
    }).then(function (modal) {
        $scope.modal = modal;
    });

    vm.showCart = function () {
        $scope.Cart = {};
        $scope.action = 'Cart';
        $scope.isAdd = true;
        $scope.modal.show();
    };




    $scope.deleteCart = function () {

        $scope.modal.hide();
    };

    $scope.$on('$destroy', function () {
        $scope.modal.remove();
    });

    return vm;

以便删除顶部标签并看到一些文字。这是工作CodePen

更新

根据您的要求，您不需要使用$ ionicModal，您可以使用 transitionTo

将您现有的控制器修改为喜欢这个

<强> HTML

 <script id="templates/add-or-edit-cart.html" type="text/ng-template">

         <ion-view view-title="View Cart" nav-bar-class="bar-balanced">
            <ion-nav-bar class="bar-positive" align-title="center">
                <ion-nav-back-button>
                </ion-nav-back-button>
            </ion-nav-bar>
            <ion-content class="padding">

                    <a class="button icon ion-chevron-left" href="#/tab/facts"> Back</a>
              Dummy Text 

            </ion-content>
        </ion-view>


    </script>

<强> JS

像这样修改状态

.state('carty', {
      url: "/carty",
       templateUrl: "templates/add-or-edit-cart.html",
        controller:'OverviewController'

    })

控制器代码

.controller('OverviewController', function ($scope, $ionicModal,$state) {
    var vm = this;

    $ionicModal.fromTemplateUrl('add-or-edit-cart.html', {
        scope: $scope,
        animation: 'slide-in-up'
    }).then(function (modal) {
        $scope.modal = modal;
    });

    vm.showCart = function () {

        $state.transitionTo('carty');
    };




    $scope.deleteCart = function () {
        //birthdayService.deleteBirthday($scope.birthday);
        $scope.modal.hide();
    };

    $scope.$on('$destroy', function () {
        $scope.modal.remove();
    });

    return vm;

})
;

这里最后一件事是你的工作codepen

Answer 2

在路线配置中添加虚拟页面的状态，并在视图购物车按钮中将该状态设置为ui-sref。

Answer 3

检查此笔：http://codepen.io/toddhalfpenny/pen/bNyLYB

看看

<ion-view cache-view="false" id="store-visit-wrapper" hide-tabs>

状态视图和urlrouter问题

HTML

3 个答案:

更新