I use Bootstrap 3 modal component to load a remote form, in which I define an Angular controller and several functions. But the browser said "Tried to Load Angular More Than Once".
Main page:
(omitted: ng-app="manageAppCollections", ng-controller="manageAppController")
<button type="button" class="btn btn-success" ng-href="./appConfForm" data-toggle="modal" data-target="#saveModal">Add an App</button>
<div id="saveModal" class="modal inmodal fade" aria-hidden="true" role="dialog" tabindex="-1" refresh-modal>
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
Form page(./appConfForm):
<div ng-app="saveForm" ng-controller="saveFormController">
<div class="modal-header">
<button class="close" data-dismiss="modal" type="button">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
</div>
<div class="modal-body">
<form class="form-horizontal" name="eventEditForm">
(omitted form content)
</form>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" type="button">Cancel</button>
<button class="btn btn-primary" type="button" ng-click='addApp()'>Submit</button>
</div>
</div>
<script>
angular.module('saveForm',[]).controller('saveFormController', ['$scope, $http', function($scope, $http) {
$scope.addApp = function(){
console.log("Added!");
}
}])
</script>
The addType() function cannot be triggered.
Do I need to compile the remote content? And how can I do that?
Edit
Previously I loaded AngularJS files in both pages, which was not necessary. Now I remove those files in the form page, but the content in the page won't work. I assume it needs compiling after loaded, so now:
Main page:
(omitted: ng-app="manageAppCollections", ng-controller="manageAppController")
<button type="button" class="btn btn-success" ng-href="./appConfForm" data-toggle="modal" data-target="#saveModal">Add an App</button>
<div id="saveModal" class="modal inmodal fade" aria-hidden="true" role="dialog" tabindex="-1" refresh-modal>
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
<script>
angular.module('manageAppCollections').directive("refreshModal", ['$compile', function($compile) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.on('loaded.bs.modal', function(e) {
$compile(element.contents())(scope);
}).on('hidden.bs.modal', function (e) {
element.removeData('bs.modal');
});
}
}
}])
But now the error becomes: Argument 'saveFormController' is not a function, got undefined
You don't need to create two 'ng-app'.
With only two controllers but with the same ng-app, you can do the job.
Can you try something like this : (EDIT: the code bellow doesn't works)
<div ng-controller="saveFormController">
<div class="modal-header">
<button class="close" data-dismiss="modal" type="button">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
</div>
<div class="modal-body">
<form class="form-horizontal" name="eventEditForm">
(omitted form content)
</form>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" type="button">Cancel</button>
<button class="btn btn-primary" type="button" ng-click='addApp()'>Submit</button>
</div>
</div>
angular.module('manageAppCollections').controller('saveFormController', ['$scope, $http', function($scope, $http) {
$scope.addApp = function(){
console.log("Added!");
}
}])
saveFormController becomes a controller of the manageAppCollections app
EDIT
To work with AngularJS and Bootrap, you could also use angular-ui, it's easier : http://angular-ui.github.io/bootstrap/#/modal
EDIT2
I edited my previous code, you can check the result here :
Plunkr (from the doc)
Related
First of all, I'm pretty new to angularjs.. So when I'm trying to pass data from angularjs controller to a bootstrap modal they don't don't display.
Trigger
<a ng-click="editarEndereco(item)" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#exampleModalLong">Editar</a>
Modal
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document" >
<div class="modal-content" ng-controller="listaEnderecosController">
<div class="modal-header">
<h4 class="modal-title" id="exampleModalLongTitle">Alterar informações deste endereço</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
{{enderecoAlterar.bairro}}
<div class="modal-body" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
AngularJS Controller
$scope.enderecoAlterar = {};
$scope.editarEndereco = function (item) {
$scope.enderecoAlterar = item;
};
From this implementation you will not be able to pass parameters to the modal.
First you should seperate id="exampleModalLong" div with inside content to a new html file.
Then edit this <a> tag as below,
<a ng-click="editarEndereco(item)" class="btn btn-primary btn-xs">Editar</a>
And inside your controller, edit editarEndereco function as below,
$scope.editarEndereco = function (item) {
var modalInstance = $modal.open({
controller: 'CREATE A NEW CONTROLLER FOR THE MODAL AS WELL. IF YOU ALREADY HAVE IT. MENTION IT HERE',
templateUrl: 'YOUR NEWLY CREATED HTML FILE URL HERE',
resolve: {
enderecoAlterar : item
}
});
};
Then inside the modalinstance controller inject enderecoAlterar & use it
I am doing it using the angular.copy(item, $scope.item); function.
This is how I have done it in my code:
$scope.confirmDelete = function (item) {
$scope.item = {};
angular.copy(item, $scope.item);
$('#delete-item-modal').modal({
show: true
});
}
<a role="button" ng-click="confirmDelete(offer)">Delete</a>
<!-- Confirm delete modal -->
<div class="modal fade" id="delete-item-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Delete element</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-16">
Are you sure you want to delete <strong>{{item.offerTitle}}</strong>?
</div>
</div>
</div>
<div class="modal-footer">
<form novalidate name="deleteOfferForm" ng-submit="deleteOffer(item)">
<input type="hidden" class="form-control" id="{{appData.securityTokenName}}" value="{{appData.securityToken}}">
<button type="button" class="btn btn-xs btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-xs btn-danger">Delete</button>
</form>
</div>
</div><!-- /.modal-content -->
</div>
</div>
I'm using .NET Framework 4.5, Bootstrap v3.3.6 on a ASP.NET MVC project.
What I want to do is create a modal form
I tried the following:
Created a modal container in the main layout
<div id="modal-container" class="modal fade" tabindex="-1" role="dialog" style="border: 5px solid #3A87AD;">
x
<div class="modal-content" style="width:500px !important; margin: 10px auto !important;">
<div class="modal-body"></div>
</div>
</div>
Added js to make internal Ajax call to inject content in a partial view
$(function () {
$('body').on('click', 'modal-link', function (e) {
e.preventDefault();
$(this).attr('data-target', '#modal-container');
$(this).attr('data-toggle', 'modal');
});
$('body').on('click', 'modal-close-btn', function() {
$('modal-container').modal('hide');
});
$('#modal-container').on('hidden.bs.modal', function(){
$(this).removeData('bs.modal');
});
});
Created a partial view that to load in a modal dialog
<div class=" ">
<div class="modal-title" style="color: #3A87AD;">
<h3> Add Content</h3>
</div>
<br />
#using (Html.BeginForm("Create", "Place", FormMethod.Post))
{
<div class="row-fluid">
Enter Content
</div>
<div class="row-fluid">
#Html.textAreaFor(m => m.Text, new { style="width:400px; height:200px;"})
</div>
<div class="row-fluid">
<div class="col-md-4 col-md-offset-4">
<button type="submit" id="btnSave" class="btn btn-sm">Save</button>
<button type="button" class="btn btn-sm" data-dismiss="modal">Cancel</button>
</div>
</div>
}
</div>
<script type="text/javascript">
$(function () {
$('#btnSave').click(function () {
$('#modal-container').modal('hide');
});
});
</script>
Created action to return the partial view and to process the results of the post
public ActionResult CreateModal()
{
return PartialView("_CreateModal");
}
[HttpPost]
public ActionResult CreateModal(Place model)
{
return RedirectToAction("Index");
}
Created an action link to show the modal when clicked
#Html.ActionLink("Click me", "CreateModal", "Place", null, new { #class = "img-btn-addcontent modal-link", title = "Add Content" })`
My problem is that my modal doesnt look like a modal
Simply add bootstrap.min.js and bootstrap.css to Your bundles for showing/hiding modal.
Your modal body should look like this:
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
#Html.Partial("My partial View")
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
`
and then you call Your modal by:
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
Also remember to insert Your partial View into Your modal body.
My solution. You can write this code in cshtml.
Step1:
<script type="text/javascript">
function ShowModal() {
$("#exampleModal").modal('show');
}
</script>
Step2:
<button type="button" class="btn btn-sm btn-default" onclick="ShowModal()">Show modal</button>
Step3:
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I have a bootstrap modal, which has table with attribute contenteditable = trueinside of it (table is created dynamically with js). I'd like to set up a neat feature - if user presses cancel then the changes in table will be dismissed. I understand that i could do this with writing a function for different states and then calling out the previous state in case of cancel. I'm just thinking that is there a quicker-better-faster approach?
I did some searching and found one link which had similar issue, but the approach and result there are a bit different from mine which means that it didn't work for me.
Here's my code - parts of it are in Estonian, i don't think in general code is necessary for this question but i'll still provide:
<div class="modal fade" id="ajamasinModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"><i class="fa fa-cog" style="font-size:20px"></i> Ajamasin</h4>
</div>
<div class="modal-body">
<div id="changeablevoor"></div>
<button type="button" class="btn btn-primary" onClick="muudaClick()">Change</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" data-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>
Try the following approach ( view comments inline ):
Html
<div class="modal fade" id="ajamasinModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
//...
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" data-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>
JS
// Add hidden event of the modal
$('#ajamasinModal').on('hidden.bs.modal', function (e) {
cancelModal(); // Call the function to cancel the modal after hiding of the modal
})
// Cancel the modal
function cancelModal() {
// Re-generate content with default values
}
More information about these events of Bootstrap Modal can be found here in the Docs of Bootstrap: Bootstrap Modal Events
here is a diagram made by Chart
<div class="diagram">
<canvas id="pie" class="chart chart-pie" width="150" height="150" data="ModalObj.FunctionalTest" labels="labels" colours="Colours">
</canvas>
this is directive
.directive('modal', function () {
return {
template: '<ng-include src="getTemplateUrl()"/>',
restrict: 'E',
controller: function($scope) {
//function used on the ng-include to resolve the template
$scope.getTemplateUrl = function() {
return $scope.path;
}
}
}});
besides I have to add the diagram in a modal if template url needs it, not all templates use chart
DEMO: http://jsfiddle.net/softvar/9cf47fe1/1/
HTML:
<div ng-app="myApp">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<elem-modal></elem-modal>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
JS:
var app = angular.module('myApp', []);
app.directive('elemModal', function () {
return {
template: '<p>Test</p><ng-include src="getTemplateUrl()"/>',
restrict: 'E',
controller: function($scope) {
//function used on the ng-include to resolve the template
$scope.getTemplateUrl = function() {
return $scope.path;
}
},
link: function (scope) {
console.log(scope)
}
}});
I want to ask if how would it be possible to pass the value from the input field to the third parameter of #Html.Action in order to be accessed to the controller method. Here is my code:
In my view:
Here is the script that passes the id to the input.
<script type="text/javascript">
$(document).on("click", ".desktop_id", function () {
var deskId = $(this).data('id');
$(".modal-body #idd").val(deskId);
});
</script>
Here is the modal to show the partial view of the action
<a data-toggle="modal" data-id="#item.desktop_info_id" title="Add this item" class="desktop_id" href="#myModal1"><i title="Actions" class="fa fa-th"></i></a>
<!-- Modal -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel1">Actions</h4>
</div>
<div class="modal-body">
<input type="text" name="idd" id="idd" value=""/>
#Html.Action("Transaction", "Desktop", new {id=---need to be field---})
</div>
<div class="modal-footer">
<button type="button"class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
How would it be possible that the #Html.Action("Transaction", "Desktop", new {id=---need to be filled---}) third paraameter can access the id value the same from the input field so that I can pass it to the controller? Thanks.
Try to redirect to your action directly from your jQuery function:
<script type="text/javascript">
$(document).on("click", ".desktop_id", function () {
var deskId = $(this).data('id');
var url = '#Html.Raw(Url.Action("Transaction", "Desktop", new { id = "_id" }))';
url = url.replace("_id", deskId);
window.location(url);
});
</script>
I think I understand what you need. your modal depends on id so you can use it directly like
<a data-toggle="modal" data-id="#item.desktop_info_id" title="Add this item" class="desktop_id" href="##item.desktop_info_id"><i title="Actions" class="fa fa-th"></i></a>
NOTE: here in href="##item.desktop_info_id" used dynamic id
Also set same id for modal: id="#item.desktop_info_id"
<div class="modal fade" id="#item.desktop_info_id" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel1">Actions</h4>
</div>
<div class="modal-body">
<input type="text" name="idd" id="idd" value=""/>
#Html.Action("Transaction", "Desktop", new {id=item.desktop_info_id})
</div>
<div class="modal-footer">
<button type="button"class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
UPDATE
Here fiddle with sample, and all seems work: dotnetfiddle