I am trying to show a simple yes/no modal but I run from one issue into another. The current error message I am getting is:
Error: [$injector:unpr] http://errors.angularjs.org/1.6.1/$injector/unpr?p0=%24modalInstanceProvider%20%3C-%20%24modalInstance%20%3C-%20MessageDialogCtrl
at http://localhost:8080/web/bower_components/angular/angular.min.js:6:425
at http://localhost:8080/web/bower_components/angular/angular.min.js:44:395
at Object.d [as get] (http://localhost:8080/web/bower_components/angular/angular.min.js:42:92)
at http://localhost:8080/web/bower_components/angular/angular.min.js:44:457
at d (http://localhost:8080/web/bower_components/angular/angular.min.js:42:92)
at e (http://localhost:8080/web/bower_components/angular/angular.min.js:42:333)
at Object.invoke (http://localhost:8080/web/bower_components/angular/angular.min.js:42:418)
at R.instance (http://localhost:8080/web/bower_components/angular/angular.min.js:93:35)
at http://localhost:8080/web/bower_components/angular-bootstrap/ui-bootstrap.min.js:8:30298
at http://localhost:8080/web/bower_components/angular/angular.min.js:133:460 Possibly unhandled rejection: {}
Here are the essential parts which are responsible for the modal to show up:
index.js
var emaApp = angular.module('emaApp', ['ui.bootstrap']);
function showMessageDialog($scope, $uibModal, title, message, buttons) {
var messageScope = $scope.$new(true);
messageScope.title = title;
messageScope.message = message;
messageScope.buttons = buttons;
var modalInstance = $uibModal.open({
templateUrl: 'js/messages/message-dlg.html',
controller: 'MessageDialogCtrl',
scope: messageScope
});
//setupKeyHandling(modalInstance);
return modalInstance;
}
emaApp.controller('mainCtrl', ['$scope', '$http', '$uibModal', function($scope, $http, $uibModal) {
$scope.deleteModel = function(modelId) {
showMessageDialog($scope, $uibModal, 'Delete model',
'Do you really want to delete the model "' + modelId + '"?',
['Yes', 'No', 'Cancel'])
.result.then(function(result) {
alert('working..');
});
}
}]);
message-dlg-controller.js
/**
* The controller for the yes/no/cancel.
*/
emaApp.controller('MessageDialogCtrl', [ '$scope', '$modalInstance', function($scope, $modalInstance) {
$scope.primary = [ 'yes', 'ok' ];
$scope.caption = {
'yes' : 'Ja',
'no' : 'Nein',
'ok' : 'OK',
'cancel' : 'Abbrechen'
};
$scope.close = function(button) {
if (button == 'cancel') {
$modalInstance.dismiss();
} else {
$modalInstance.close(button);
}
}
} ]);
message-dlg.html
<div class="modal-header">
<h4 class="modal-title">{{title}}</h4>
</div>
<div class="modal-body">
<p>{{message}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn"
data-ng-class="primary.indexOf(b) != -1 ? 'btn-primary' : 'btn-default'"
data-ng-repeat="b in buttons" data-ng-click="close(b)">{{caption[b]}}</button>
</div>
Included scripts:
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="js/index.js"></script>
<script src="js/messages/message-dlg-controller.js"></script>
plnkr.co/edit/CeVr0heB2Av7vveCTUQ?p=preview
Changes : Use $uibModalInstance instead of $modalInstance
Related
I will enter username and password in text field but I will not save. Without saving that data i will close the popup modal.
When I click outside of the modal, it will close.
If I open the popup again, the previous datas are still appearing. I need to clear those datas and want to make the field as empty.
Please check the following link. Plunkr
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.user = {
user: 'name',
password: null,
notes: null
};
$scope.open = function () {
$modal.open({
templateUrl: 'myModalContent.html', // loads the template
backdrop: true, // setting backdrop allows us to close the modal window on clicking outside the modal window
windowClass: 'modal', // windowClass - additional CSS class(es) to be added to a modal window template
controller: function ($scope, $modalInstance, $log, user) {
$scope.user = user;
$scope.submit = function () {
$log.log('Submiting user info.'); // kinda console logs this statement
$log.log(user);
$modalInstance.dismiss('cancel'); // dismiss(reason) - a method that can be used to dismiss a modal, passing a reason
}
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
},
resolve: {
user: function () {
return $scope.user;
}
}
});//end of modal.open
}; // end of scope.open function
};
<!doctype html>
<html ng-app="plunker">
<head>
<script src="https://code.angularjs.org/1.2.18/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<form ng-submit="submit()">
<div class="modal-body">
<label>User name</label>
<input type="text" ng-model="user.user" />
<label>Password</label>
<input type="password" ng-model="user.password" />
<label>Add some notes</label>
<textarea rows="4" cols="50" ng-model="user.notes">
</textarea>
</div>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
<input type="submit" class="btn primary-btn" value="Submit" />
</div>
</form>
</script>
<button class="btn" ng-click="open()">Open me!</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
</body>
</html>
The problem is, you are actually binding the $scope.user in modal to the $scope.user from the ModalDemoCtrl. To solve this, you should make a copy of your user before using it in the modal controller:
$modal.open({
...
controller: function ($scope, $modalInstance, $log, user) {
$scope.user = angular.copy(user);
...
}
});
See Angular.copy() documentation.
see Clear the form after submit angularjs for how to clear the form. you can trigger this in your submit function before the modal closes.
You can do that with ui bootstrap promise:
$scope.modal.result.then(function(result) {
console.log('client: resolved: ' + result);
}, function(reason) {
console.log('client: rejected: ' + reason);
});
I had run your code and it worked fine.
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.user = {
user: 'name',
password: null,
notes: null
};
$scope.open = function () {
var $theModal = $modal.open({
templateUrl: 'myModalContent.html', // loads the template
backdrop: true, // setting backdrop allows us to close the modal window on clicking outside the modal window
windowClass: 'modal', // windowClass - additional CSS class(es) to be added to a modal window template
controller: function ($scope, $modalInstance, $log, user) {
$scope.user = user;
$scope.submit = function () {
$log.log('Submiting user info.'); // kinda console logs this statement
$log.log(user);
$modalInstance.dismiss('cancel'); // dismiss(reason) - a method that can be used to dismiss a modal, passing a reason
}
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
},
resolve: {
user: function () {
return $scope.user;
}
}
});//end of modal.open
$theModal.result.then(function(result) {
console.log('client: resolved: ' + result);
}, function(reason) {
$scope.user = {}
console.log('client: reject: ' + reason);
})
}; // end of scope.open function
};
Could you please let me know what is wrong with my code? I get the initial HTML page, but when I click on "Open", nothing happens. Not even the console logs an error, or any other change.
app.js
var app = angular.module('carApp', ['ui.bootstrap']);
ctrl.js
app.controller('carCtrl', function($scope, $http, $uibModal) {
$http.get('jobs.json').success(function(data) {
$scope.data = data;
$scope.open = function() {
var modalContent = $uibModal.open({
templateUrl: 'careersTpl.html',
controller : modalContentCtrl,
resolve: {
items: function() {
return $scope.data;
}
}
})
}
});
});
var modalContentCtrl = function ($scope, $modalInstance, data) {
$scope.data = data;
$scope.selected = {
item: $scope.data.specs
};
};
JSON:
{
"specs":[
{
"job-title":"TITLE",
"job-apply":"applink",
"job-body":"JOB BODY"
}
]
}
HTML:
<div class="car-up">
<script type="text/ng-template" id="careersTpl.html">
<div class="modal-header">
<h3>Lorem Ipsum</h3>
</div>
<div class="modal-body">
<p ng-repeat="item in data">{{item}}</p>
</div>
</script>
<button class="btn" ng-click="open()">Open</button>
</div>
I'm new to AngularJS, but I have linked the app.js and ctrl.js... thanks.
EDIT: after I've placed ng-controller="carCtrl" in the html file, I receive this error:
Error: [$injector:unpr]
http://errors.angularjs.org/1.5.7/$injector/unpr?p0=%24modalInstanceProvider%20%3C-%20%24modalInstance
O/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:6:412
db/n.$injector<#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:43:84
d#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:40:344
db/V<#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:43:144
d#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:40:344
e#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:41:78
h/<.invoke#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:41:163
gf/this.$gethttps://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:89:397
resolveSuccess#https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.js:4422:34
e/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:130:409
vf/this.$gethttps://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:145:103
vf/this.$gethttps://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:142:165
vf/this.$gethttps://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:145:399
Lc[b]https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:274:444
Sf#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:37:31
Rf/d#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:36:486
Please find working demo
angular.module('carApp', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
var app = angular.module('carApp');
app.controller('carCtrl', function($scope, $http, $uibModal) {
//$http.get('jobs.json').success(function(data) {//Uncomment
//$scope.data = data; Uncomment
//Remove below line from code when you are using this in your project
$scope.data = {
"specs": [{
"job-title": "TITLE",
"job-apply": "applink",
"job-body": "JOB BODY"
}]
}
$scope.open = function() {
var modalContent = $uibModal.open({
templateUrl: 'careersTpl.html',
controller: 'ModalInstanceCtrl',
controllerAs: '$ctrl',
resolve: {
items: function() {
return $scope.data;
}
}
})
}
//});//Uncomment
});
app.controller('ModalInstanceCtrl', function($uibModalInstance, items, $scope) {
$scope.data = items;
console.log($scope.data);
$scope.selected = {
item: $scope.data.specs
};
});
<!doctype html>
<html ng-app="carApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.3.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="carCtrl" class="modal-demo">
<script type="text/ng-template" id="careersTpl.html">
<div class="modal-header">
<h3>Lorem Ipsum</h3>
</div>
<div class="modal-body">
<p ng-repeat="(k,v) in data.specs">
<span>Title: {{v["job-title"]}}<br/> </span>
<span>Link: {{v["job-apply"]}}<br/> </span>
<span>Body: {{v["job-body"]}}<br/> </span>
</p>
</div>
</script>
<button class="btn" ng-click="open()">Open</button>
</div>
</body>
</html>
Try defining the controller like this outside,
app.controller('modalContentCtrl ', function($scope, $modalInstance, data) {
$scope.data = data;
$scope.selected = {
item: $scope.data.specs
};
}
I have the following problems:
1- When my model is open and I click 'cancel' to close it, it reloads the page.
2- When I click 'OK', my 'DELETE'-request is not sent to the server (it doesn't receive anything) and the page is reloaded. I'm also not redirected to the page I'm meant to go to.
HTML
<div>
<input type="button" class="btn btn-primary" ng-click="suppr()" value="ok"/>
<input type="button" class="btn btn-default" ng-click="annulSupp()" value="cancel" />
</div>
file js
(function() {
'use strict';
var progress = angular.module('demret.progress', ['ui.bootstrap.modal']);
progress.directive('progressDem', function() {
return {
restrict : 'E',
templateUrl : "progress/progress.html",
controller : [ '$scope', '$http', 'Demande', '$window', '$modal', function($scope, $http, Demande, $window, $modal) {
// TODO
$scope.supprimerDemande = function() {
var urlSetDem = cfg.urlDDRRest + 'demande/' + Demande.get().id;
var config = {
method : 'DELETE',
url : urlSetDem,
jsonExpected : true
};
$http(config).then(function(http) {
$window.location.href = cfg.urlPortail;
})['catch'](function(http) {
$scope.errT= 'Une erreur technique';
})['finally'](function() {
});
}
// ==========================================
// open fenetre modal
// ==========================================
$scope.modalSuppressionDem = function(size) {
// déclaration de la fenetre
var modalInstance = $modal.open({
animation : true,
templateUrl : 'progress/suppression-modal.html',
controller : 'ModalSuppressionDem',
size : size,
backdrop : 'static',
resolve : {
functionSupp : function() {
return $scope.supprimerDemande;
}
}
});
modalInstance.result.then(function() {
// close
});
};
} ]
}
});
// Controleur de la fenetre modale
progress.controller('ModalSuppressionDem', [ '$scope', '$modalInstance', 'functionSupp', function($scope, $modalInstance, functionSupp) {
$scope.suppr = function() {
functionSupp();
$modalInstance.close();
};
$scope.annulSupp = function() {
$modalInstance.close();
};
} ]);
})();
config.js
(function() {
'use strict';
window.cfg = {
urlDDRRest : '/TOTO-rs/api/',
urlPortail : '/TOTO/',
};
})();
Does anyone know why this happens?
Thank you in advance!
Try this:
replace
<input type="button" class="btn btn-default" ng-click="annulSupp()" value="cancel" />
with
<input type="button" class="btn btn-default" ng-click="annulSupp($event)" value="cancel" />
and replace $scope.annulSupp() function with below code
$scope.annulSupp = function(event) {
event.preventDefault();
$modalInstance.close();
};
How to create a popup while mouse over on a div.
http://jsfiddle.net/akA6H/39/
In this fiddle mouseover popup is working. But while hover on a option name only popup is opend. How to open a popup while hover on a div.
// Code goes here
'use strict';
var myApp = angular.module('myApp', ['ui.bootstrap']);
myApp.controller('myCtrl', ['$modal', '$scope', '$log',
function ($modal, $scope, $log) {
$scope.option = {
name: 'Name (hover over for more details)',
longDescription: 'This is my detailed description... lots of text here'
}
$scope.showOptionDetails = function(option) {
$log.info($scope.option);
$scope.optionModal = $modal.open({
template: '<div class="modal-header" ng-mouseleave="close()"><h3 class="modal-title">Option</h3></div><div class="modal-body">{{option.longDescription}}</div><div class="modal-footer" ng-click="close()">Close</div>',
controller: 'modalCtrl',
resolve: {
option: function() {
return $scope.option;
}
}
});
}
$scope.closeOptionDetails = function() {
$scope.optionModal.close();
}
}
]);
myApp.controller('modalCtrl', [
'$modalInstance', '$scope', '$log', 'option', function ($modalInstance, $scope, $log, option) {
$log.info(option);
$scope.option = option;
$scope.close = function() {
$modalInstance.close();
}
}
]);
<h1>Hello Plunker!</h1>
<div ng-controller="myCtrl">
<span ng-mouseover="showOptionDetails(option)" >{{option.name}}</span>
</div>
Here, I want an empty popup while hover on a div tag. Please help me how can I do this?
I have an angular-bootstrap modal that I have created a custom directive for so that the input field will autofocus on open. I have added the directive template to my input tag, but on inspect element, it's nowhere to be seen. Code:
Directive (copied from: How to set focus on input field?)
'use strict';
angular.module('portfolioManager.directives', []).directive('focusMe', function($timeout, $parse) {
return {
//scope: true, // optionally create a child scope
link: function(scope, element, attrs) {
var model = $parse(attrs.focusMe);
scope.$watch(model, function(value) {
console.log('value=',value);
if(value === true) {
$timeout(function() {
element[0].focus();
});
}
});
// to address #blesh's comment, set attribute value to 'false'
// on blur event:
element.bind('blur', function() {
console.log('blur');
scope.$apply(model.assign(scope, false));
});
}
};
});
HTML:
<div class='panel-heading report'>
<h1 class='port-title port-manager-header title custom-inline'>Portfolios</h1>
<div ng-controller="ModalCtrl" class='create-new-frame'>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">New Portfolio</h3>
</div>
<form name='eventForm'>
<div class="modal-body">
<input class='form-control' ng-model='portfolios.portName' placeholder='Portfolio name' ng-required='true' maxlength="35" focus-me="shouldBeOpen">
<span class="help-inline" ng-show="notUnique">Portfolio name already used</span>
<br>
<div ng-init="radioModel = 'Right'; portfolios.groupSelection = false" class="btn-group">
<label class="btn btn-primary" ng-model="radioModel" ng-click='portfolios.groupSelection = true' btn-radio="'Left'">Group</label>
<label class="btn btn-primary" ng-model="radioModel" ng-click='portfolios.groupSelection = false' btn-radio="'Right'">Private</label>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok(portfolios.portName)" ng-disabled="eventForm.$invalid || notUnique" id='portfolio-modal-create-button'>Create</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</form>
</script>
<button class="btn btn-sm btn-primary create-new-frame-btn" ng-click="open('sm')">Create New</button>
</div>
</div>
ModalCtrl:
'use strict';
angular.module('portfolioManager').controller('ModalCtrl', function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size) {
var modalInstance = $modal.open({
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());
});
};
});
You need to create the modal somehow in your code and trigger it to be displayed. You just defined the template, now you have to use it. See http://angular-ui.github.io/bootstrap/#/modal
Example from the docs:
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size) {
var modalInstance = $modal.open({
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());
});
};
});
Use the templateUrl attribute to link to your modal template and create a trigger to call open from the UI (for instance: <span ng-click="open()">Open Modal</span>).