$ ionicModal not firing

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'); 

}); 

Must моего модальный скрипт должен быть в файле index.html? не может быть в другом файле, и я называю это оттуда? Любая помощь приветствуется. Мне просто нужно модальный, чтобы открыть на кнопку мыши addImage()

Answer 1

как @DanielSchott говорит, вам нужно вызвать вашу функцию openModal, чтобы отправить заказ, чтобы показать его.

В конце $scope.addImage добавить $scope.modal.show()

Или просто сделайте следующее:

$ionicModal.fromTemplateUrl('my-modal.html', { 
    scope: $scope, 
    animation: 'slide-in-up' 
}).then(function(modal) { 
    $scope.modal = modal; 
    $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 
}); 

}