I'm a newby in AngularJS and maybe I'm missing something stupid but I cannot get my ionic modal work out. I need that a modal open up when I click the share button, but I get in console Error: $scope.modal is undefined. I'm not sure why. This is my code right now. Any help will be apreciated.
modal.html
<ion-modal-view>
<ion-header-bar>
<h1 class="title">My Modal title</h1>
</ion-header-bar>
<ion-content>
Hello!
</ion-content>
</ion-modal-view>
members.html (This is where I have my share button)
<ion-nav-buttons side="secondary">
<button class="button button-clear" ng-click="openModal()">
<span class="share-button">Share</span>
</button>
</ion-nav-buttons>
controller.js
.controller('MembersCtrl', function($scope, $ionicModal) {
$ionicModal.fromTemplateUrl('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();
});
})
If your modal.html is stored in a templates folder, can you try adding templates/ or whatever the path is:
$ionicModal.fromTemplateUrl('templates/modal.html', {
Related
I'm very new to angularjs and currently studying mean stack. I'm using this code to open an html page then getting the id of clicked user.
<a href="/edit/{{ person._id }}">
<button type="button" ng-show="management.editAccess" class="btn btn-primary">Edit</button>
</a>
But I want to open my html as a modal, I tried this method here http://plnkr.co/edit/Y7jDj2hORWmJ95c96qoG?p=preview but it doesn't show the html, Please help me on how to open my whole html as modal.
You need to $http.get the template in html and then using $sce render it.
<button data-toggle="modal" data-target="#theModal" ng-click="get()">get</button>
<div id="theModal" class="modal fade text-center">
<div class="modal-dialog">
<div class="modal-content">
<div ng-bind-html="trustedHtml"></div>
</div>
</div>
</div>
JS:
$scope.get = function() {
$http({
method: 'GET',
url: 'Lab6.html',
})
.then(function successCallback(data){
$scope.data = data.data;
console.log($scope.data);
$scope.trustedHtml = $sce.trustAsHtml($scope.data);
},
function errorCallback(response){
console.log(response);
console.log('error');
});
}
Here is working plunker: http://plnkr.co/edit/SdCAep1dDH8UcpprwDH6?p=preview
Also I would argue that you should probably be using Angular UI Bootstrap to create your modal dialogs http://angular-ui.github.io/bootstrap/
Here is a cut down version of how to open a modal using Angular UI Bootrstrap:
$scope.open = function (vehicle) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
resolve: {
items: function () {
return $scope.items;
}
}
});
};
I am new to Angular and trying to implement a modal. Having problem closing/dismissing the modal - when I click the cancel button, nothing happens.
Here is the controller code:
angular.module('navApp')
// Passing the $modal to controller as dependency
.controller('HomeCtrl', ['$scope', '$uibModal', function ($scope, $uibModal) {
$scope.title = "Hello, Angm-Generator!";
$scope.open = function () {
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalCtrl'
});
};
}])
.controller('ModalCtrl', function ($scope, $uibModalInstance) {
// Added some content to Modal using $scope
$scope.content = "ModalCtrl, Yeah!"
// Add cancel button
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
})
and here is the template view of the actual modal
<!-- Modal Script -->
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<button type="button" class="close" datadismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title">Hello from Modal!</h3>
</div>
<div class="modal-body">
Modal Content from: <b>{{ content }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-danger" ngclick="cancel()">Cancel</button>
</div>
</script>
Even clicking the cross on the top right of modal doesn't close the modal. Any ideas? Thanks:)
Should it not be ng-click="cancel()" instead of ngclick?
Also I don't think the scope is bound to the controller, I haven't tested this but I believe you need some more options:
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalCtrl',
controllerAs: '$mCtrl',
bindToController: true
});
And then just update your template:
ng-click="$mCtrl.cancel()"
Have you tried $uibModalInstance.close()?
Another thing you can do is
$scope.open = function () {
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalCtrl'
});
modalInstance.result.then(function successCallBack() {
modalInstance.close()
}, function errorCallBack() {
modalInstance.close()
})
};`
If you want to close the model , on click of the cross bar then , you can use
<button type="button" class="close" data-dismiss="modal">×</button>
This will be button , and data-dismiss="modal" will close your modal.
1.I was building a ionic Mobile App in that i have a gallery and i was trying to view a image as pop-up from gallery, pop-up was
working fine and it fetch the image path too but unable to see image
on pop-up.
here my app.js
function galleryController($scope, $http, $rootScope, $location,$ionicModal, profile){
/*alert(0);*/
profile.galleries(window.localStorage['token']).success(function(data){
/*alert(JSON.stringify(data));*/
if(data.status == 200)
{
$scope.gallery = data.data.gellary;
//alert(JSON.stringify(data));
}
$ionicModal.fromTemplateUrl('partials/gallery.html', function(modal) {
$scope.gridModal = modal;
}, {
scope: $scope,
animation: 'slide-in-up'
});
// open video modal
$scope.openModal = function(selected) {
$scope.data = selected;
$scope.gridModal.show();
};
// close video modal
$scope.closeModal = function() {
$scope.gridModal.hide();
};
//Cleanup the video modal when we're done with it!
$scope.$on('$destroy', function() {
$scope.gridModal.remove();
});
});
};
kangaroo.directive('gridImage', function(){
alert("yyyyyyyyyyyyyyyyyyy");
return function($scope, element, attrs){
var url = attrs.gridImage;
element.css({
'background-image': 'url(' + url +')',
});
};
});
I was fetching image from s3 Amazon by using api , this is html
code in my gallery.html where i get the data from my controller i
can see the image in gallery and not able to see on pop-up don't
know what was the problem.
**gallery.html page**
<ion-header class="bar bar-header bar-balanced">
<!-- <button class="button button-icon icon ion-navicon"></button> -->
</ion-header>
<div class="padding" >
<div ng-controller="galleryController">
<ion-content class="content has-header ionic-pseudo" style="margin-top:19px">
<div ng-repeat="x in gallery" >
<img ng-src="{{x.thumb_img}}" ng-click="openModal(x)" alt="" class="gallery_i" />
</div>
</ion-content>
<script id="partials/gallery.html" type="text/ng-template">
<div class="modal" ng-click="closeModal()">
<img ng-src="{{data.thumb_img}}" />
</div>
</script>
</div>
</div>
please help me out of this
Thanks in advance.
I'm using AngularUI to integrate Bootstrap components in my Angular 1.4 app, such as Modals.
I'm calling a Modal in my controller like so:
var modalInstance = $modal.open({
animation: true,
templateUrl: '/static/templates/support-report-modal.html',
controller: 'ModalInstanceCtrl'
});
Unfortunately, when I want to close the Modal by using:
modalInstance.close();
The modal itself dissapears, and the backdrop also fades out, but it isn't removed from the DOM, so it overlays the whole page leaving the page unresponsive.
When I inspect, I'm seeing this:
In the example in the Documentation on https://angular-ui.github.io/bootstrap/#/modal The class modal-open is removed from body and the whole modal-backdropis removed from the DOM on close.
Why is the Modal fading out but the backdrop not removed from the DOM in my example?
I've checked out many of the other questions about the backdrop of bootstrap Modals but I can't seem to figure out what's going wrong.
This is apparently due to a bug. AngularUI doesn't support Angular 1.4 yet. Once http://github.com/angular-ui/bootstrap/issues/3620 is resolved this will work.
Until the team gets this sorted here is a work around.
<div class="modal-footer">
<button class="btn btn-primary"
ng-click="registerModal.ok()"
remove-modal>OK</button>
<button class="btn btn-warning"
ng-click="registerModal.cancel()"
remove-modal>Cancel</button>
</div>
/*global angular */
(function () {
'use strict';
angular.module('CorvetteClub.removemodal.directive', [])
.directive('removeModal', ['$document', function ($document) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.bind('click', function () {
$document[0].body.classList.remove('modal-open');
angular.element($document[0].getElementsByClassName('modal-backdrop')).remove();
angular.element($document[0].getElementsByClassName('modal')).remove();
});
}
};
}]);
}());
Unfortunately it appears that the team is not on the same page concerning this issue as it was pushed to a separate thread by a contributor and then the thread it was pushed to was closed by another as it was considered "off topic" by another.
Simply you can do like this, first close the modal u have opened
$('#nameOfModal').modal('hide');
basically id of modal Second this to remove if any
$('body').removeClass('modal-open');
lastly to close backdrop
$('.modal-backdrop').remove();
<button type="button" class="close" onclick="$('.modal-backdrop').remove();"
data-dismiss="modal">
$(document).keypress(function(e) {
if (e.keyCode == 27) {
$('.modal-backdrop').remove();
}
});
I am using Angular version 1.3.13 and have a similar issue. I been researching the problem and believe this bug extends from angular version 1.3.13 to 1.4.1 details here https://github.com/angular-ui/bootstrap/pull/3400
And if you scroll to the bottom of that link you will see a post by fernandojunior showing the versions he tested and upgraded to still showing the same issue. He even created a plnker to simulate the issue http://plnkr.co/edit/xQOL58HDXTuvSDsHRbra and I've simulated the issue in the code snippet below using the Angular-UI modal code example.
// angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular
.module('ui.bootstrap.demo', [
'ngAnimate',
'ui.bootstrap',
]);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.animationsEnabled = true;
$scope.open = function (size) {
var modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
$scope.toggleAnimation = function () {
$scope.animationsEnabled = !$scope.animationsEnabled;
};
});
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<!-- angular 1.4.1 -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.js"></script>
<!-- angular animate 1.4.1 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-animate.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a ng-click="selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<button class="btn btn-default" ng-click="open()">Open me!</button>
<button class="btn btn-default" ng-click="open('lg')">Large modal</button>
<button class="btn btn-default" ng-click="open('sm')">Small modal</button>
<button class="btn btn-default" ng-click="toggleAnimation()">Toggle Animation ({{ animationsEnabled }})</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
</body>
</html>
In you submit button or which ever button/selection that moves you to another page, just have data-dismiss="modal" and that should take care of the back drop. It is just telling to dismiss the modal when you have made your selection.
I am also using Angular 1.3.0 and I am also using UI bootstrap-tpls-0.11.2 and for some reason my issue was happening when I was redirecting to the new page and the backdrop was still displaying, so I ended up adding this code...
.then(function () {
$("#delete").on('hidden.bs.modal', function () {
$scope.$apply();
})
});
which I actually found here....
Hide Bootstrap 3 Modal & AngularJS redirect ($location.path)
I'm new to AngularJS and am working on my first mobile application starting with the Ionic Framework. I have a section where I have the user click on a "write review" button. This in turn opens an Ionic modal that has a form attached to it. When the user fills in the form and hits post I will be doing something with that data then the function it calls destroys the modal window. The error gets thrown after the form is submitted and I have the data everytime I open the write review button.
Code that opens the modal:
<a ng-controller="openReviewCtrl" ng-click="openModal()" class="item item-icon-left">
<i class="icon ion-compose"></i>
Write a Review (10 POINTS)
</a>
Review form Template:
<div class="modal" >
<header class="bar bar-header bar-positive">
<h1 class="title">Write Review</h1>
<button class="button button-clear button-positive" ng-click="closeModal()">Cancel</button>
</header>
<ion-content has-header="true" padding="true">
<form class="list">
<label class="item item-input">
<input type="text" placeholder="Full Name" ng-model="review.author" name="fullName">
</label>
<label class="item item-input">
<textarea placeholder="Review" cols="50" ng-model="review.text" name="review"></textarea>
</label>
<button class="button button-full button-positive" ng-click="writeReview(review)" />Post</button>
</form>
</ion-content>
</div>
And finally my Controller code (currently just logs data):
.controller('openReviewCtrl', function($scope, $ionicModal) {
$scope.master = {};
$ionicModal.fromTemplateUrl('templates/review.html', function(modal) {
$scope.modal = modal;
}, {
scope: $scope,
animation: 'slide-in-up'
});
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
//Be sure to cleanup the modal
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
$scope.writeReview = function(review) {
console.log(review);
$scope.modal.remove();
};
})
Upon click of "Write Review" modal opens.
Data gets written in and submitted.
Logs what was written fine and closes Modal.
Upon clicking "Write Review" again throws error
Post button resets page and cancel does not work
TypeError: Cannot call method '$broadcast' of null
at ionic.views.Modal.inherit.show (http://angular.dev:8888/www/lib/js/ionic.bundle.js:31554:26)
at Scope.$scope.openModal (http://angular.dev:8888/www/js/controllers.js:49:18)
at http://angular.dev:8888/www/lib/js/ionic.bundle.js:17182:21
at http://angular.dev:8888/www/lib/js/ionic.bundle.js:33774:11
at Scope.$eval (http://angular.dev:8888/www/lib/js/ionic.bundle.js:18939:28)
at Scope.$apply (http://angular.dev:8888/www/lib/js/ionic.bundle.js:19039:23)
at HTMLAnchorElement.<anonymous> (http://angular.dev:8888/www/lib/js/ionic.bundle.js:33773:15)
at http://angular.dev:8888/www/lib/js/ionic.bundle.js:9578:10
at forEach (http://angular.dev:8888/www/lib/js/ionic.bundle.js:7272:20)
at HTMLAnchorElement.eventHandler (http://angular.dev:8888/www/lib/js/ionic.bundle.js:9577:5)
What is causing this?
I believe you need to create a new modal object using the $ionicModal.fromTemplateUrl method, instead of reusing the old modal object. Once the modal object is removed the angular bindings and $scope are destroyed and not available when you reopen it. The error comes from the modal trying to call broadcast on a $scope object that has been set to null.
I suspect your code should look something like this (I'm not sure when you have to call "modal.show()" so that might have to be moved):
.controller('openReviewCtrl', function($scope, $ionicModal) {
$scope.master = {};
function closeModal() {
if ($scope.modal) {
$scope.modal.remove();
delete $scope.modal;
}
}
$scope.openModal = function() {
$ionicModal.fromTemplateUrl('templates/review.html', function(modal) {
$scope.modal = modal;
modal.show();
}, {
scope: $scope,
animation: 'slide-in-up'
});
};
$scope.closeModal = function() {
closeModal();
};
//Be sure to cleanup the modal
$scope.$on('$destroy', function() {
closeModal();
});
$scope.writeReview = function(review) {
console.log(review);
closeModal();
};
})
Presumably it might also be possible to fix the ionic modal code to be reusable, but I've not looked at this.