I'm working on Project MVC, Angular js
I have a problem that I show modal and in initiate fun i load a number of questions on the basis of user choose his subject and then opening the pop up modal with questions
But I do not know the modal open but without any questionds
at first i Load skill page and from this page user select his subject and then popup modal opened
after search i think the problem because of modal loaded when skill page load so after open modal no questions appeared
how can i reload modal or solve this problem
Hint : when pass function in init with values it worked and questions appeares but when pas values values passes aright and beduge is correct but popup open as empity
For example
ng-init =" ReadQuizQuestions (11, true)"
working good but when
ReadQuizQuestions (secItem.Id, secItem.hasQuiz) not working
can any one help me to solve this problem
in skill page
<div class="badge_unit heading_font video_course_preview" ng-
click="ReadQuizQuestions(secItem.Id,secItem.hasQuiz)"></div>
in angular js file
$scope.ReadQuizQuestions = function (id,hasQuiz) {
if (hasQuiz == true) {
ShowPleaseWait();
QuizService.ReadQuiz(QuizId).success(function (res) {
.
.
.
.......
$('#QuizModal').modal('show');
});
HidePleaseWait();
}
}
Thanks in advance
In this exemple i passed parameters from my controller to the modal (list of questions)
To pass the parameter you need to use resolve and inject the items in controller of modal.
$modal.open({
emplateUrl: 'myModal.html',
controller: 'ModalDialogController',
resolve: {
questionsList: function () {
return $scope.questionsList;
}
}
})
.result.then(function(result) {
alert(result);
});
After selecting your question and validate i reyrn the selected value to my controller with
$scope.ok = function () {
$modalInstance.close($scope.modal.selectedName);
};
This is a full exemple
Related
I have a modal text entry page in which, among other fields, there is an "author" dropdown list
Sometime it happens that there is not the desired author item in the "author" dropdown list
so that, the user must close modal text entry page, go to modal "author" entry page to insert the new author and, only then, come back to the modal text entry page to submit the form.
In the following the piece of code to invoke modal text entry page:
vm.popupAddTextForm = function () {
var modalInstance = $modal.open({
templateUrl: '/add_text_modal/add_text_modal.view.html',
controller: 'add_text_modalCtrl as vm',
resolve : { modalDati : function () {
return {datatips : vm.datatips,
datatipbyid : vm.datatipbyid,
datasubtips : vm.datasubtips,
dataauts : vm.dataauts }
}
}
});
Is there a way to invoke modal "author" entry page directly from the modal text entry page by clicking on a "Add new author" button?
After inserting new author how to update the relative dropdown list ?
Thnks in advance.
Thnks Maxim Shoustin and João Fé I followed your suggestions and I got it! I hope to help someone sharing the process:
I insert in the html the btn to call vm.popupAddAutForm():
<div class="col-sm-4"><a ng-click="vm.popupAddAutForm()" class="btn btn-default pull-right" style="width: 100px;">Nuovo Autore</a></div>
I put in the modal text entry page the code to invoke vm.popupAddAutForm():
//If Author is not present in the relative dropdown list
//I invoke modal author entry page
//(the modal text entry page is hidden and all data field remain in stand-by)
vm.popupAddAutForm = function () {
var modalInstance = $modal.open({
templateUrl: '/add_aut_modal/add_aut_modal.view.html',
controller: 'add_aut_modalCtrl as vm'
});
//after author insert I recall RestFul API to retrieve authors again and
//update the relative dropdown list
modalInstance.result.then(function(data) {
//refresh only the author dropdown list;
Data.AllAutori()
.then(function (response) {
vm.dataauts = {auts: response.data};
//alert(JSON.stringify(vm.datasubtips.subtips));
})
});
}
and the result is just as the following images:
modal text entry page
modal author entry page and hidden modal text entry page
Since I am a beginner using AngularJS the $scope approach to pass data between different controllers and (in my case) a modal drives me crazy. Due to that reason, I googled around the web and found an interesting blogpost about passing data to a UI-bootstrap modal without using $scope.
I had a deeper look at this blogpost and the delivered plunk which works pretty nice and started to adopt this to my own needs.
What I want to achieve is to open a modal delivering an text input in which the user is able to change the description of a given product. Since this would provide more than a minimal working example I just broke everything down to a relatively small code snippet available in this plunk.
Passing data from the main controller into the modal seems to work as the default product description is displayed in the modal text input as desired. However, passing the data back from the modal to the main controller displaying the data in index.html does not seem to work, since the old description is shown there after it was edited in the modal.
To summarize my two questions are:
What am I doing wrong in oder to achieve a 'two-way-binding' from the main controller into the modal's text input and the whole way back since the same approach works in the mentioned blogpost (well, as the approach shown in the blogpost works there must be something wrong with my code, but I cannot find the mistakes)
How can I implement a proper Accept button in order to accept the changed description only if this button is clicked and discard any changes in any other case (clicking on Cancel button or closing the modal by clicking next to it)?
In your main controller, create two resolver functions: getDescription and setDescription.
In your modal controller, use them.
Your modal HTML
<div class="modal-header">
<h3 class="modal-title">Test Text Input in Modal</h3>
</div>
<div class="modal-body">
Product description:
<input type="text" ng-model="modal.description">
</div>
<div class="modal-footer">
<button ng-click="modal.acceptModal()">Accept</button>
<button ng-click="modal.$close()">Cancel</button>
</div>
Your main controller
function MainCtrl($modal) {
var self = this;
self.description = "Default product description";
self.DescriptionModal = function() {
$modal.open({
templateUrl: 'modal.html',
controller: ['$modalInstance',
'getDescription',
'setDescription',
ModalCtrl
],
controllerAs: 'modal',
resolve: {
getDescription: function() {
return function() { return self.description; };
},
setDescription: function() {
return function(value) { self.description = value; };
}
}
});
};
};
Your modal controller
function ModalCtrl($modalInstance, getDescription, setDescription) {
var self = this;
this.description = getDescription();
this.acceptModal = function() {
setDescription(self.description);
$modalInstance.close();
};
}
I am using ngDialog in my application and I would like to create a generic confirm modal , which I can use whenever I need , the confirm message is going to be different .
My questions :
1- Is creating a directive with the ngDialog functionality a good idea and what is its design ?
2- what is the difference between confirm() and openConfirm() in ngDialog code .
Thanks in advance
Well, to answer your questions,
1 - You can create a directive for it, having a scope, say type to which you pass the confirmation type ( i.e. submit for submit confirmations, delete for delete confirmations) and the directive should render the message based on the type you specified.
2 - openConfirm() is a type of ngDialog, which can only be closed by confirming the action (unlike ngDialog.open()), so you don't have the ability here to close the dialog when clicking anywhere in theDOM. confirm() is just a method you use to close the dialog, you use this method to close the dialog and resolve the promise that was returned when opening the modal, so it can go on <button ng-click="confirm()">Confirm</button> inside your dialog.
Hope this helped you
Update
openConfirm()
Opens a dialog that by default does not close when hitting escape or clicking outside the dialog window. The function returns a promise that is either resolved or rejected depending on the way the dialog was closed.
To resolve the promise, your dialog should be like this:
With ngDialog controller
ngDialog.openConfirm({
template: '<div></div>',
controller: ['$scope', function($scope) {
// Controller logic here
}]
}).then(function (success) {
// Success logic here
}, function (error) {
// Error logic here
});
With directive controller
ngDialog.openConfirm({
template: '<div></div>',
scope: $scope, // <- ability to use the scopes from directive controller
}).then(function (success) {
// Success logic here
}, function (error) {
// Error logic here
});
You can use your directive controller as long as you pass scope: $scope inside the dialog
Here is a demo showing you how you can use type
Try switching the type in index.html from confirm to remove and see the updated content and button text in the dialog
I want to show list of videos in Bootstrap modal. and when user clicks on any video from the list that video should play in modal only. similarly I want to show albums in modal and on click of specific album I want to show slideshow in the same modal, for this I am using angular js and Codeigniter with bootstrap. Please help me.
Not a very descriptive question, but I recommend you check out Angular UI's Bootstrap directives.
I use their modal directive a lot and being able to specify a template and controller for a modal is priceless when it comes to working with things like you're describing.
Update to address your comment:
I have no idea where $scope.hall_videos is coming from, but you need to use the resolve property to return the correct videos. For instance, if $scope.hall_videos was an object where the key was the id and the value was an array of videos like so:
$scope.hall_videos = {
'1': ['video1', 'video2'],
...
'7': ['video14', 'video15']
};
You could populate with the correct videos like this:
$scope.open = function (size, id) {
var modalInstance = $modal.open({
templateUrl: 'video_gallery.html',
controller: 'HomeCtrl',
size: size,
resolve: {
hall_videos: function () {
var videos = [];
angular.forEach($scope.hall_videos, function(video) {
if (video.hall_info_id === id) {
videos.push(video);
}
});
return videos;
}
}
});
};
I'm trying to make a directive angularJS directive for Twitter Bootstrap Modal.
var demoApp = angular.module('demoApp', []);
demoApp.controller('DialogDemoCtrl', function AutocompleteDemoCtrl($scope) {
$scope.Langs = [
{Id:"1", Name:"ActionScript"},
{Id:"2", Name:"AppleScript"},
{Id:"3", Name:"Asp"},
{Id:"4", Name:"BASIC"},
{Id:"5", Name:"C"},
{Id:"6", Name:"C++"}
];
$scope.confirm = function (id) {
console.log(id);
var item = $scope.Langs.filter(function (item) { return item.Id == id })[0];
var index = $scope.Langs.indexOf(item);
$scope.Langs.splice(index, 1);
};
});
demoApp.directive('modal', function ($compile, $timeout) {
var modalTemplate = angular.element("<div id='{{modalId}}' class='modal' style='display:none' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'><div class='modal-header'><h3 id='myModalLabel'>{{modalHeaderText}}</h3></div><div class='modal-body'><p>{{modalBodyText}}</p></div><div class='modal-footer'><a class='{{cancelButtonClass}}' data-dismiss='modal' aria-hidden='true'>{{cancelButtonText}}</a><a ng-click='handler()' class='{{confirmButtonClas}}'>{{confirmButtonText}}</a></div></div>");
var linkTemplate = "<a href='#{{modalId}}' id= role='button' data-toggle='modal' class='btn small_link_button'>{{linkTitle}}</a>"
var linker = function (scope, element, attrs) {
scope.confirmButtonText = attrs.confirmButtonText;
scope.cancelButtonText = attrs.cancelButtonText;
scope.modalHeaderText = attrs.modalHeaderText;
scope.modalBodyText = attrs.modalBodyText;
scope.confirmButtonClass = attrs.confirmButtonClass;
scope.cancelButtonClass = attrs.cancelButtonClass;
scope.modalId = attrs.modalId;
scope.linkTitle = attrs.linkTitle;
$compile(element.contents())(scope);
var newTemplate = $compile(modalTemplate)(scope);
$(newTemplate).appendTo('body');
$("#" + scope.modalId).modal({
backdrop: false,
show: false
});
}
var controller = function ($scope) {
$scope.handler = function () {
$timeout(function () {
$("#"+ $scope.modalId).modal('hide');
$scope.confirm();
});
}
}
return {
restrict: "E",
rep1ace: true,
link: linker,
controller: controller,
template: linkTemplate
scope: {
confirm: '&'
}
};
});
Here is JsFiddle example http://jsfiddle.net/okolobaxa/unyh4/15/
But handler() function runs as many times as directives on page. Why? What is the right way?
I've found that just using twitter bootstrap modals the way the twitter bootstrap docs say to is enough to get them working.
I am using a modal to house a user edit form on my admin page. The button I use to launch it has an ng-click attribute that passes the user ID to a function of that scope, which in turn passes that off to a service. The contents of the modal is tied to its own controller that listens for changes from the service and updates values to display on the form.
So.. the ng-click attribute is actually only passing data off, the modal is still triggered with the data-toggle and href tags. As for the content of the modal itself, that's a partial. So, I have multiple buttons on the page that all trigger the single instance of the modal that's in the markup, and depending on the button clicked, the values on the form in that modal are different.
I'll take a look at my code and see if I can pull any of it out to build a plnkr demo.
EDIT:
I've thrown together a quick plunker demo illustrating essentially what I'm using in my app: http://embed.plnkr.co/iqVl0Wb57rmKymza7AlI/preview
Bonus, it's got some tests to ensure two password fields match (or highlights them as errored), and disables the submit button if the passwords don't match, or for new users username and password fields are empty. Of course, save doesn't do anything, since it's just a demo.
Enjoy.
There is a working native implementation in AngularStrap for Bootstrap3 that leverages ngAnimate from AngularJS v1.2+
Demo : http://mgcrea.github.io/angular-strap/##modals
You may also want to checkout:
Source : https://github.com/mgcrea/angular-strap/blob/master/src/modal/modal.js
Plunkr : http://plnkr.co/edit/vFslNmBAoKPVXtdmBXgv?p=preview
Well, unless you want to reinvent this, otherwise I think there is already a solution.
Check out this from AngularUI. It runs without twitter bootstrap.
I know it might be late but i started trying to figure out why the handler got called several times as an exercise and I couldn't stop until done :P
The reason was simply that each div you created for each modal had no unique id, once I fixed that everything started working. Don't ask me as to what the exact reason for this is though, probably has something to do with the $('#' + scope.modalId).modal() call.
Just though I should post my finding if someone else is trying to figure this out :)