I am making an ionic + angularJs app, for Android to be specific. I don't know why, but in my so named homeController
, whenever I tried to call a function to show me a $ionicModal
, it gives me an error...
TypeError: Cannot read property 'show' of undefined at Scope.$scope.openModal (homeModule.js:18) at new (homeModule.js:59) at Object.invoke (ionic.bundle.js:11994) at $get.extend.instance (ionic.bundle.js:16247) at ionic.bundle.js:15502 at forEach (ionic.bundle.js:8155) at nodeLinkFn (ionic.bundle.js:15501) at positeLinkFn (ionic.bundle.js:14887) at publicLinkFn (ionic.bundle.js:14766) at IonicModule.controller.self.appendViewElement (ionic.bundle.js:47324)
My controller looks like this (the start of it):
app.controller('homeController', function($scope, $ionicPopup, $state, $ionicLoading, $rootScope, $ionicModal, mapFactory){
// Load the modal from the given template URL
$ionicModal.fromTemplateUrl('templates/loginModal.html', function($ionicModal) {
$scope.modal = $ionicModal;
console.log($scope.modal);
}, {
scope: $scope,
animation: 'slide-in-up',
backdropClickToClose: false,
hardwareBackButtonClose: false,
focusFirstInput: true
});
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
I have tried already many different ways to make the modal open, the funny thing is, whenever I go to a new $state, and go back, it opens... But not when I refresh the page. Also, I did a console.log($scope.modal)
to see if my variable was being set, and the result was:
ionic.Utils.inherit.child {focusFirstInput: true, unfocusOnHide: true, focusFirstDelay: 600, backdropClickToClose: false, hardwareBackButtonClose: false…}$el: JQLite[1]animation: "slide-in-up"backdropClickToClose: falseel: div.modal-backdropfocusFirstDelay: 600focusFirstInput: truehardwareBackButtonClose: falsemodalEl: ion-modal-view.modalscope: ChildScopeunfocusOnHide: trueviewType: "modal"__proto__: ionic.Utils.inherit.Surrogate
Can anyone please help me on this one? Thanks in advance.
I am making an ionic + angularJs app, for Android to be specific. I don't know why, but in my so named homeController
, whenever I tried to call a function to show me a $ionicModal
, it gives me an error...
TypeError: Cannot read property 'show' of undefined at Scope.$scope.openModal (homeModule.js:18) at new (homeModule.js:59) at Object.invoke (ionic.bundle.js:11994) at $get.extend.instance (ionic.bundle.js:16247) at ionic.bundle.js:15502 at forEach (ionic.bundle.js:8155) at nodeLinkFn (ionic.bundle.js:15501) at positeLinkFn (ionic.bundle.js:14887) at publicLinkFn (ionic.bundle.js:14766) at IonicModule.controller.self.appendViewElement (ionic.bundle.js:47324)
My controller looks like this (the start of it):
app.controller('homeController', function($scope, $ionicPopup, $state, $ionicLoading, $rootScope, $ionicModal, mapFactory){
// Load the modal from the given template URL
$ionicModal.fromTemplateUrl('templates/loginModal.html', function($ionicModal) {
$scope.modal = $ionicModal;
console.log($scope.modal);
}, {
scope: $scope,
animation: 'slide-in-up',
backdropClickToClose: false,
hardwareBackButtonClose: false,
focusFirstInput: true
});
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
I have tried already many different ways to make the modal open, the funny thing is, whenever I go to a new $state, and go back, it opens... But not when I refresh the page. Also, I did a console.log($scope.modal)
to see if my variable was being set, and the result was:
ionic.Utils.inherit.child {focusFirstInput: true, unfocusOnHide: true, focusFirstDelay: 600, backdropClickToClose: false, hardwareBackButtonClose: false…}$el: JQLite[1]animation: "slide-in-up"backdropClickToClose: falseel: div.modal-backdropfocusFirstDelay: 600focusFirstInput: truehardwareBackButtonClose: falsemodalEl: ion-modal-view.modalscope: ChildScopeunfocusOnHide: trueviewType: "modal"__proto__: ionic.Utils.inherit.Surrogate
Can anyone please help me on this one? Thanks in advance.
Share Improve this question edited Aug 23, 2017 at 12:16 Kukic Vladimir 1,0104 gold badges15 silver badges23 bronze badges asked Feb 4, 2015 at 17:50 Bruno Duarte BritoBruno Duarte Brito 1401 gold badge2 silver badges12 bronze badges2 Answers
Reset to default 3The error means $scope.modal
was not created - you call to fromTemplateUrl
isn't right. The second parameter is the modal options and you're passing a callback.
The documentation provides a good example.
In your case, the call to fromTemplateUrl
should look more like this:
$ionicModal.fromTemplateUrl('templates/loginModal.html', {
scope: $scope,
animation: 'slide-in-up',
backdropClickToClose: false,
hardwareBackButtonClose: false,
focusFirstInput: true
}).then(function(modal) {
$scope.modal = modal;
console.log($scope.modal);
});
I think i found the fix. I was trying to open the modal from inside a 'if' statement, as soon as i took it off from the 'if', it worked perfectly fine. Anyways, thank you Brad.