Question

我想在我的一个html视图中打开一个模态。我正在构建一个离子应用程序，但它没有触发

new_referral.html

<ion-view view-title="New Referral">
    <ion-nav-bar class="bar-stable">
    <ion-nav-buttons side="left">
        <button class="button button-small">Cancel</button>
    </ion-nav-buttons>  
  </ion-nav-bar>
  <ion-content>
    <div class="row">
      <label class="button button-energized" ng-click="addImage()">
        Add image
      </label><br><br>
        <ion-scroll>
          <img ng-repeat="image in images" ng-src="{{urlForImage(image)}}" ng-click="showImages($index)" class="image-list-thumb" height="50px"/>
        </ion-scroll>
    </div>
 </ion-content>
</ion-view>
<script id="my-modal.html" type="text/ng-template">
  <div class="modal">
    <ion-header-bar>
      <h1 class="title">Edit Contact</h1>
    </ion-header-bar>
    <ion-content>
      <div class="list">
        <label class="item item-input">
          <span class="input-label">Name</span>
          <input type="text" ng-model="contact.name">
        </label>
        <label class="item item-input">
          <span class="input-label">Info</span>
          <input type="text" ng-model="contact.info">
        </label>
      </div>

      <button class="button button-full button-energized" ng-click="closeModal()">Done</button>
    </ion-content>
  </div>
</script>

在我的controller.js

中

.controller('MainCtrl', function($scope, $ionicModal) {
 $scope.addImage = function() {

    console.log("add image");
    $ionicModal.fromTemplateUrl('my-modal.html', {
      scope: $scope,
      animation: 'slide-in-up'
    }).then(function(modal) {
      $scope.modal = modal;
    });

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

    $scope.$on('$destroy', function() {
      $scope.modal.remove();
    });
    // Execute action on hide modal
    $scope.$on('modal.hidden', function() {
      // Execute action
    });
    // Execute action on remove modal
    $scope.$on('modal.removed', function() {
      // Execute action
    });
}

app.js config

.config(function($stateProvider, $urlRouterProvider, $httpProvider) {
  $stateProvider

.state('login', {
    url: "/login",
    //abstract: true,
    templateUrl: "templates/login.html",
    controller: 'AppCtrl'
  })

.state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "templates/menu.html",
    controller: 'MainCtrl'
  })

.state('app.new', {
    url: "/new_referral",
    views: {
      'menuContent': {
        templateUrl: "templates/new_referral.html"
      }
    }
  })

$urlRouterProvider.otherwise('/login');

});

我的模态脚本必须在index.html文件中吗？它不能在另一个文件中，我从那里调用它？任何帮助表示赞赏。我只需要在按钮单击addImage（）

时打开模态

Answer 1

正如@DanielSchott所说，你需要调用你的函数openModal来发送命令来显示它。

在notification_subscriptions年末添加$scope.addImage

或者只需执行以下操作：

$scope.modal.show()

}

Answer 2

您需要致电：$scope.modal.show();才能显示模式

尝试这样：

<label class="button button-energized" ng-click="addImage($event)">
    Add image
  </label>


$scope.addImage = function($event) {

console.log("add image");
$ionicModal.fromTemplateUrl('my-modal.html', {
  scope: $scope,
  animation: 'slide-in-up'
}).then(function(modal) {
  $scope.modal = modal;
  $scope.modal.show($event);
});

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

$scope.$on('$destroy', function() {
  $scope.modal.remove();
});
// Execute action on hide modal
$scope.$on('modal.hidden', function() {
  // Execute action
});
// Execute action on remove modal
$scope.$on('modal.removed', function() {
  // Execute action
});

}

$ ionicModal没有解雇

2 个答案: