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)
}
}});
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 am trying to open up a bootstrap modal from within a vue instance.
The function works if I find the modal element within the function. However, if I declare the modal element as a variable either outside the instance or in the vue data object the modal is broken (the backdrop appears but I can't see the modal).
Here is my code:
<div id="app">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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">
...
</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>
<button class="btn btn-default" data-target="#myModal" #click="makeNormalModal">Normal Modal</button>
<button class="btn btn-danger" data-target="#myModal" #click="makeBrokenModal">Broken Modal</button>
</div>
and the javascript:
let modalElement = $('#myModal');
const app = new Vue({
el: '#app',
data: {
'modal': $('#myModal')
},
methods: {
makeNormalModal() {
let element = $(event.target);
$('#myModal').modal('show');
},
makeBrokenModal() {
this.modal.modal('show');
}
}
});
I have created a jsfiddle to show the issue.
You could use the ref attribute:
<div class="modal fade" id="myModal" ref="modal">
Then, access it via $refs property:
$(this.$refs.modal).modal('show');
Updated fiddle: https://jsfiddle.net/ukmnc4gs/4/
Instead of $('#myModal') set '#myModal' inside your data object.
const app = new Vue({
el: '#app',
data: {
'modal': '#myModal'
},
methods: {
makeBrokenModal(event) {
$(this.modal).modal('show')
}
}
});
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 created a jquery modal popup modal of Bootstrap.
I want the popup show after link cliked and download a file.
-- HTML --
<!-- Link -->
<a class="download-link" data-toggle="modal" data-target="#myModal" href="http://ourdomain.com/get/file_download.zip" rel="nofollow">Download</a>
<!-- 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-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
This is the body text
</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>
-- Javascript --
$('[data-toggle=modal]').on('click', function (e) {
var $target = $($(this).data('target'));
$target.data('triggered',true);
setTimeout(function() {
if ($target.data('triggered')) {
$target.modal('show').data('triggered',false);
};
}, 1000); // milliseconds
return false;
});
The problem is when I click the link, the file is not downloaded, just show up popup. Any idea how to do it??
You can create another link, hide it and trigger click on this anchor when your modal is opening:
HTML:
<!-- Link -->
<a href="#" data-toggle="modal" data-target="#myModal" rel="nofollow" download>Download</a>
aa
<!-- 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-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
This is the body text
</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>
JS:
$('[data-toggle=modal]').on('click', function(e) {
var $target = $($(this).data('target'));
$target.data('triggered', true);
setTimeout(function() {
if ($target.data('triggered')) {
$target.modal('show').data('triggered', false);
};
}, 1000); // milliseconds
return false;
});
$('#myModal').on('show.bs.modal', function () {
$('#download')[0].click();
});
CODEPEN
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)