Good day! I am making a popup on my save button but it seems to be not working. I copied the code on JSFiddle sample but when I run it on my laptop its not working
Here is the result on my browser
here is my code
<body>
<div ng-controller="MainCtrl" class="container">
<button ng-click="toggleModal()" class="btn btn-default">Save</button>
<modal title="Saved!" visible="showModal">
<form role="form">
<p>
Time Settings Succesfully Saved!
</p>
<button type="submit" class="btn btn-default" visible="closeModal">Ok</button>
</form>
</modal>
</div>
<script>
var mymodal = angular.module('mymodal', []);
mymodal.controller('MainCtrl', function ($scope) {
$scope.showModal = false;
$scope.toggleModal = function(){
$scope.showModal = !$scope.showModal;
};
});
mymodal.directive('modal', function () {
return {
template: '<div class="modal fade">' +
'<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">{{ title }}</h4>' +
'</div>' +
'<div class="modal-body" ng-transclude></div>' +
'</div>' +
'</div>' +
'</div>',
restrict: 'E',
transclude: true,
replace:true,
scope:true,
link: function postLink(scope, element, attrs) {
scope.title = attrs.title;
scope.$watch(attrs.visible, function(value){
if(value == true)
$(element).modal('show');
else
$(element).modal('hide');
});
$(element).on('shown.bs.modal', function(){
scope.$apply(function(){
scope.$parent[attrs.visible] = true;
});
});
$(element).on('hidden.bs.modal', function(){
scope.$apply(function(){
scope.$parent[attrs.visible] = false;
});
});
}
};
});
</script>
</body>
Related
I had one textarea and a button beside it.When i click the button a modal window opens,which contains a textarea.I will enter some message and press submit,then the message should be displayed in textarea which is outside the modal window,which iam able to do.But when again i click on button,it is still showing the previously entered message.I'm unable to clear that even after using a clear function for ng-submit.I appreciate some one to help me.
angular.module('ui-rangeSlider', [])
.directive('modal', function () {
return {
template: '<div class="modal fade">' +
'<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">{{ title }}</h4>' +
'</div>' +
'<div class="modal-body" ng-transclude></div>' +
'</div>' +
'</div>' +
'</div>',
restrict: 'E',
transclude: true,
replace:true,
scope:true,
link: function postLink(scope, element, attrs) {
scope.title = attrs.title;
scope.$watch(attrs.visible, function(value){
if(value == true)
$(element).modal('show');
else
$(element).modal('hide');
});
$(element).on('shown.bs.modal', function(){
scope.$apply(function(){
scope.$parent[attrs.visible] = true;
});
});
$(element).on('hidden.bs.modal', function(){
scope.$apply(function(){
scope.$parent[attrs.visible] = false;
});
});
}
};
})
var mymodal = angular.module('mymodal', ['ui-rangeSlider']);
mymodal.controller('MainCtrl', function ($scope) {
$scope.showModal = false;
$scope.toggleModal = function(){
$scope.showModal = !$scope.showModal;
};
$scope.submitToggle = true;
//default get the data
//send post, saving to localStorage
$scope.sendPost = function(test) {
//setting the data to the textara
$scope.hello = test;
$scope.hello1 = test;
$scope.clear();
/* //saving the data
return localstore.setData(test);
*/
};
$scope.clear=function(){
$scope.test = null;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<body ng-app="mymodal">
<div ng-controller="MainCtrl" class="container">
<textarea ng-model="hello">{{test}}</textarea>
<button ng-click="toggleModal()" class="btn btn-default">Open modal</button>
<modal title="Login form" visible="showModal">
<form>
<textarea ng-model="test" class="form-control" id="text" name="modaltext" placeholder="Type in your message" rows="5" maxlength="200"></textarea>
<button class="btn btn-default" type="submit" ng-click="sendPost(test);clear()" data-dismiss="modal">Submit</button>
<div id="textarea_feedback"></div>
</form>
</modal>
</div>
</body>
/http://jsfiddle.net/RLQhh/5562/
You can access and clear the test text when calling the function to open the modal, like this:
scope.$$nextSibling.test = '';
http://jsfiddle.net/RLQhh/5632/
Edit:
Now it also resets the remaining characters to 99.
I am using ng-admin and I created a custom directive(following this example http://plnkr.co/edit/rYC3nd7undqJz2mr8Old) to upload a excel sheet, when I upload the file, I get the following TypeError: Cannot set property 'columnDefs' of undefined, my code
Module:
var myApp = angular.module('myApp', ['ng- admin','ngStorage','chart.js','ui.grid']);
Controller
myApp.controller('MainCtrl', ['$scope', function ($scope) {
var vm = this;
vm.gridOptions = {};
vm.reset = reset;
function reset() {
vm.gridOptions.data = [];
vm.gridOptions.columnDefs = [];
}
}]);
Directive:
myApp.directive('fileread', ['$http', function ($http) {
return {
restrict: 'E',
scope: {
opts: '='
},
link: function ($scope, $elm, $attrs) {
$elm.on('change', function (changeEvent) {
var reader = new FileReader();
reader.onload = function (evt) {
$scope.$apply(function () {
var data = evt.target.result;
var workbook = XLSX.read(data, {type: 'binary'});
var headerNames = XLSX.utils.sheet_to_json( workbook.Sheets[workbook.SheetNames[0]], { header: 1 })[0];
var datasheet = XLSX.utils.sheet_to_json( workbook.Sheets[workbook.SheetNames[0]]);
console.log(datasheet);
$scope.opts.columnDefs = [];
headerNames.forEach(function (h) {
$scope.opts.columnDefs.push({ field: h });
});
$scope.opts.data = datasheet;
var json_string = JSON.stringify($scope.opts.data);
console.log(json_string);
$elm.val(null);
});
};
reader.readAsBinaryString(changeEvent.target.files[0]);
});
}, template:
'<div ng-controller="MainCtrl as vm">'+
'<button type="button" class="btn btn-success"
ng-click="vm.reset()">Reset Grid</button>'+
'<br />'+
'<br />'+
'<div id="grid1" ui-grid="vm.gridOptions" class="grid">'+
'<div class="grid-msg-overlay"
ng-show="!vm.gridOptions.data.length">'+
'<div class="msg">'+
'<div class="center">'+
'<span class="muted">Select Spreadsheet File</span>'+
'<br />'+
'<input type="file" accept=".xls,.xlsx,.ods" fileread="" opts="vm.gridOptions" multiple="false" />'+
'</div>'+
'</div>'+
'</div>'+
'</div>'+
'</div>'
}
}]);
Template from I am calling the directive
var customDashboardTemplate =
'<div class="row dashboard-starter"></div>' +
'<question-stats></question-stats>'+
'<div ng-controller="MainCtrl" >'+
'<fileread>'+
'<button type="button" class="btn btn-success" ng-click="reset()">Reset Grid</button>'+
'<br />'+
'<br />'+
'<div id="grid1" ui-grid="gridOptions" class="grid">'+
'<div class="grid-msg-overlay" ng-show="!gridOptions.data.length">'+
'<div class="msg">'+
'<div class="center">'+
'<span class="muted">Select Spreadsheet File</span>'+
'<br />'+
'<input type="file" accept=".xls,.xlsx,.ods" fileread="" opts="gridOptions" multiple="false" />'+
'</div>'+
'</div>'+
'</div>'+
'</div>'+
'</fileread>'+
'</div>'+
'<div class="row dashboard-content">' +
'<div class="col-md-6">' +
'<div class="panel panel-green">' +
'<ma-dashboard-panel collection="dashboardController.collections.last_users" entries="dashboardController.entries.last_users" datastore="dashboardController.datastore"></ma-dashboard-panel>' +
'</div>' +
'</div>'+
'<div class="col-md-6">' +
'<div class="panel panel-yellow">' +
'<ma-dashboard-panel collection="dashboardController.collections.last_tips" entries="dashboardController.entries.last_tips" datastore="dashboardController.datastore"></ma-dashboard-panel>' +
'</div>' +
'</div>'+
'</div>'+
'</div>'
;
It may just be the space inside the template separating the ng-click calling the reset function:
(ng- click)
With that space you are not calling the reset therefore not actually assigning the defaults?
Edit:
You are calling the directive within the directive within the directive's template. This seems fishy. Can we see the HTML implementation of where you are calling the directive?
In this fiddle :
http://jsfiddle.net/RLQhh/2695/
If click "Open Modal" the text "this is a new line" appears over two lines.
However If instead use this fiddle :
http://jsfiddle.net/RLQhh/2694/
The text "this is a <br> new line" appears over one line. The <br> element is not being rendered as html when used with a scoped variable.
I have set data-html="true" on both examples.
Why is this occurring ? How to render html when being applied using a scoped variable ?
fiddle src :
<div ng-controller="MainCtrl" class="container">
<h1>Modal example</h1>
<button ng-click="toggleModal()" class="btn btn-default">Open modal</button>
<modal title="Login form" visible="showModal">
<form role="form">
<div class="form-group">
<label data-html="true">{{text}}</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</modal>
</div>
var mymodal = angular.module('mymodal', []);
mymodal.controller('MainCtrl', function ($scope) {
$scope.showModal = false;
$scope.text = "this is a <br> new line";
$scope.toggleModal = function(){
$scope.showModal = !$scope.showModal;
};
});
mymodal.directive('modal', function () {
return {
template: '<div class="modal fade">' +
'<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">{{ title }}</h4>' +
'</div>' +
'<div class="modal-body" ng-transclude></div>' +
'</div>' +
'</div>' +
'</div>',
restrict: 'E',
transclude: true,
replace:true,
scope:true,
link: function postLink(scope, element, attrs) {
scope.title = attrs.title;
scope.$watch(attrs.visible, function(value){
if(value == true)
$(element).modal('show');
else
$(element).modal('hide');
});
$(element).on('shown.bs.modal', function(){
scope.$apply(function(){
scope.$parent[attrs.visible] = true;
});
});
$(element).on('hidden.bs.modal', function(){
scope.$apply(function(){
scope.$parent[attrs.visible] = false;
});
});
}
};
});
I am using modal like
<modal title="Success" id='successmessage' visible="successmessage">
<form role="form">
Success ful result.
<button type="submit" class="btn btn-primary" ng-click="closesuccessmessage()" >Ok</button>
</form>
</modal>
I have a directive on modal..
'use strict';
angular.module('abc.directives', [])
.directive('modal', function () {
return {
template: '<div class="modal fade">' +
'<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">{{ modalTitle }}</h4>' +
'</div>' +
'<div class="modal-body" ng-transclude></div>' +
'</div>' +
'</div>' +
'</div>',
restrict: 'E',
transclude: true,
replace:true,
scope:true,
link: function postLink(scope, element, attrs) {
scope.modalTitle = attrs.title;
scope.$watch(attrs.visible, function(value){
if(value == true)
$(element).modal('show');
else
$(element).modal('hide');
});
$(element).on('shown.bs.modal', function(){
scope.$apply(function(){
scope.$parent[attrs.visible] = true;
});
});
$(element).on('hidden.bs.modal', function(){
scope.$apply(function(){
scope.$parent[attrs.visible] = false;
});
});
}
};
});
in my angular controller i have created function like below
$scope.closesuccessmessage = function()
{
$scope.successmessage = false;
}
But it does not have any effect. How can i make it work. As it is very important for me to control this from a function. Modal opens up on true value, but does not close on false value.
In order for angularjs to bind variable to view outside of properties expecting expressions you must use brackets.
<modal title="Success" id='successmessage' visible="{{successmessage}}">
<form role="form">
Success ful result.
<button type="submit" class="btn btn-primary" ng-click="closesuccessmessage()" >Ok</button>
</form>
</modal>
However I'm not sure visible is a valid property in HTML. If you want to hide modal using variable you could use ng-show and set success message variable in controller
<modal title="Success" id='successmessage' ng-show="successmessage">
<form role="form">
Success ful result.
<button type="submit" class="btn btn-primary" ng-click="closesuccessmessage()" >Ok</button>
</form>
</modal>
You can't use like above you're doing. You should call modal hide function to hide a modal. Try below snippet
$scope.closesuccessmessage = function()
{
$("#successmessage").modal('hide');
}
EDIT
It's not like that you can't use scope values in your HTML. If your controller is same, you can access it easily. I changed your HTML. Please try below one
<modal title="Success" id='successmessage' data-ng-show="successmessage">
instead
<modal title="Success" id='successmessage' visible="successmessage">
I'm new with AngularJS. I'm trying to implement a reusable modal Bootstrap.
This is the index.html:
<div ng-controller="mymodalcontroller">
<modal lolo="modal1" modal-body='body' modal-footer='footer' modal-header='header' data-ng-click="myRightButton()"></modal>
Launch Demo Modal
</div>
This is the module, controller and directive:
var myModal = angular.module('myModal', []);
myModal.controller('mymodalcontroller', function ($scope) {
$scope.header = 'Put here your header';
$scope.body = 'Put here your body';
$scope.footer = 'Put here your footer';
$scope.myRightButton = function (bool) {
alert('!!! first function call!');
};
});
myModal.directive('modal', function () {
return {
restrict: 'EA',
scope: {
title: '=modalTitle',
header: '=modalHeader',
body: '=modalBody',
footer: '=modalFooter',
callbackbuttonleft: '&ngClickLeftButton',
callbackbuttonright: '&ngClick',
handler: '=lolo'
},
templateUrl: 'partialmodal.html',
transclude: true,
controller: function ($scope) {
$scope.handler = 'pop';
},
};
});
And this is the html template:
<div id="{{handler}}" class="modal fade">
<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">{{header}}</h4>
</div>
<div class="modal-body">
<p class="text-warning">{{body}}</p>
</div>
<div class="modal-footer">
<p class="text-left">{{footer}}</p>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-ng-click="callbackbuttonright(), $event.stopPropagation()">Save changes</button>
</div>
</div>
</div>
</div>
I want the 'Launch Alert' button (in the modal) executes the alert and it does it well. The problem is that it is launched when clicking the 'Cancel' button in the Modal and when the window closes. Any ideas?
Here is the working code:CodeThank you.
I would suggest you not bind to ng-click. It does some other magic stuff that can screw with things. There is also a syntax error in your partial.
I've fixed those issues in my fork here:
http://plnkr.co/edit/2jK2GFcKSiKgMQMynD1R?p=preview
To summarize:
script.js:
Change your callbackbuttonright binding from ngClick to ngClickRightButton
myModal.directive('modal', function () {
return {
restrict: 'EA',
scope: {
title: '=modalTitle',
header: '=modalHeader',
body: '=modalBody',
footer: '=modalFooter',
callbackbuttonleft: '&ngClickLeftButton',
callbackbuttonright: '&ngClickRightButton',
handler: '=lolo'
},
templateUrl: 'partialmodal.html',
transclude: true,
controller: function ($scope) {
$scope.handler = 'pop';
},
};
});
index.html:
Change data-ng-click to data-ng-click-right-button
<modal lolo="modal1" modal-body="body" modal-footer="footer" modal-header="header" data-ng-click-right-button="myRightButton()"></modal>
Another minor issue:
partialmodal.html:
Change , to ;
<button type="button" class="btn btn-primary" data-ng-click="callbackbuttonright(); $event.stopPropagation()">Launch Alert</button>
If anyone is still interested, here is a example I recently worked on with bootstrap modal and angularjs directive.
HTML:
<modal visible="showModal1" on-sown="modalOneShown()" on-hide="modalOneHide()">
<modal-header title="Modal Titel 1"></modal-header>
<modal-body>
<h3>This is modal body</h3>
</modal-body>
<modal-footer>
<button class="btn btn-primary" ng-click="hide(1)">Save</button>
</modal-footer>
</modal>
JavaScript:
var myModalApp = angular.module('myModalApp',[]);
myModalApp.directive('modal', function(){
return {
template: '<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"><div class="modal-dialog modal-sm"><div class="modal-content" ng-transclude><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></div></div>',
restrict: 'E',
transclude: true,
replace:true,
scope:{visible:'=', onSown:'&', onHide:'&'},
link:function postLink(scope, element, attrs){
$(element).modal({
show: false,
keyboard: attrs.keyboard,
backdrop: attrs.backdrop
});
scope.$watch(function(){return scope.visible;}, function(value){
if(value == true){
$(element).modal('show');
}else{
$(element).modal('hide');
}
});
$(element).on('shown.bs.modal', function(){
scope.$apply(function(){
scope.$parent[attrs.visible] = true;
});
});
$(element).on('shown.bs.modal', function(){
scope.$apply(function(){
scope.onSown({});
});
});
$(element).on('hidden.bs.modal', function(){
scope.$apply(function(){
scope.$parent[attrs.visible] = false;
});
});
$(element).on('hidden.bs.modal', function(){
scope.$apply(function(){
scope.onHide({});
});
});
}
};
}
);
myModalApp.directive('modalHeader', function(){
return {
template:'<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">{{title}}</h4></div>',
replace:true,
restrict: 'E',
scope: {title:'#'}
};
});
myModalApp.directive('modalBody', function(){
return {
template:'<div class="modal-body" ng-transclude></div>',
replace:true,
restrict: 'E',
transclude: true
};
});
myModalApp.directive('modalFooter', function(){
return {
template:'<div class="modal-footer" ng-transclude></div>',
replace:true,
restrict: 'E',
transclude: true
};
});
function ModalController($scope){
$scope.title = "Angularjs Bootstrap Modal Directive Example";
$scope.showModal1 = false;
$scope.showModal2 = false;
$scope.hide = function(m){
if(m === 1){
$scope.showModal1 = false;
}else{
$scope.showModal2 = false;
}
}
$scope.modalOneShown = function(){
console.log('model one shown');
}
$scope.modalOneHide = function(){
console.log('model one hidden');
}
}
Compared to other options, below given the minimalist approach using Angular Bootstrap and an angular factory. See a sample snippet below.
Reusable modal view - ConfirmationBox.html
<div class="modal-header">
<h3 class="modal-title">{{title}}</h3>
</div>
<div class="modal-body">
{{message}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-warn" data-ng-click="ok(); $event.stopPropagation()">OK</button>
<button type="button" class="btn btn-default" data-ng-click="cancel(); $event.stopPropagation()">Cancel</button>
</div>
Reusable module and shared factory, for handling the reusable modal dialog
angular.module('sharedmodule',['ui.bootstrap', 'ui.bootstrap.tpls'])
.factory("sharedService",["$q", "$modal", function ($q, $modal)
{
var _showConfirmDialog = function (title, message)
{
var defer = $q.defer();
var modalInstance = $modal.open({
animation: true,
size: "sm",
templateUrl: 'ConfirmationBox.html',
controller: function ($scope, $modalInstance)
{
$scope.title = title;
$scope.message = message;
$scope.ok = function ()
{
modalInstance.close();
defer.resolve();
};
$scope.cancel = function ()
{
$modalInstance.dismiss();
defer.reject();
};
}
});
return defer.promise;
}
return {
showConfirmDialog: _showConfirmDialog
};
}]);
Portion of your View, using the shared modal dialog
<a data-ng-click="showConfirm()">Go Back to previous page</a>
Controller of your view, opening your shared reusable modal dialog and handling notifications (Ok and Cancel)
var myModule = angular.module("mymodule", ['sharedmodule', 'ui.bootstrap', 'ui.bootstrap.tpls']);
myModule.controller('myController', ["$scope", "sharedService", "$window",
function ($scope, sharedService, $window)
{
$scope.showConfirm = function ()
{
sharedService.showConfirmDialog(
'Confirm!',
'Any unsaved edit will be discarded. Are you sure to navigate back?')
.then(function ()
{
$window.location = '#/';
},
function ()
{
});
};
}]);