I am trying to work on a sample application to display angular-ui bootstrap modal window.
Below is the javascript code
'use strict';
var TicketApp = angular.module('TicketApp', ['ngNotify', 'ui.bootstrap']);
var CreateCtrl = TicketApp.controller('CreateCtrl', function ($scope, $http, $timeout, $window, ngNotify, $modal) {
$scope.open = function (size) {
var modalInstance = $modal.open({
animation: true,
template: '<div class="modal-header"><h3 class="modal-title">title modal!</h3></div><div class="modal-body">Model Body Comes here !!</div><div class="modal-footer"><button class="btn btn-primary" type="button" ng-click="ok()">OK</button><button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button></div>',
controller: 'ModalInstanceCtrl',
size: size
})
};
$scope.CreateTicket = function () {
$scope.open();
}
});
var ModalInstanceCtrl = TicketApp.controller('ModalInstanceCtrl', function ($scope, $modalInstance) {
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
When $scope.open() gets called , "Unknown provider: itemsProvider <- items <- ModalInstanceCtrl" gets displayed in chrome console.
Please let me know why this error is getting displayed.
Related
I am using angular modal as per the example here http://plnkr.co/edit/bDqAll8CYwu7DGfSs7FC?p=preview
Here is my app.js and controller code
app.js
var app = angular.module("app", ['trNgGrid', 'ngAnimate', 'ngRoute', 'treasure-overlay-spinner', 'ui.bootstrap']);
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/Employee/', {
templateUrl: '/app/views/Employee.html'
}).
otherwise({
redirectTo: '/Employee'
});
}]);
Controller code
angular.module('app').controller('EmployeeController',['$scope','$modal','appService', function ($scope, $modal, appService) {
var employeesList = appService.GetEmployess();
var modalInstance;
$scope.clickMe = function () {
modalInstance = $modal.open(
{
templateUrl: '/app/views/EditEmployee.html',
resolve: {
callerData: function () { }
}
})
modalInstance.result.then(function () { });
}
$scope.cancel = function () {
modalInstance.close('closed result');
};
$scope.spinner = {
active: true
};
employeesList.then(function successCallback(response) {
$scope.Employees = response.data;
}, function errorCallback(response) {
}).finally(function () {
$scope.spinner = {
active: false
};
});
}]);
Here is my HTML code where I am calling controller
<div ng-controller="EmployeeController">
<input type="button" ng-click="clickMe()" value="Click" />
<input type="button" ng-click="cancel()" value="cancel" />
<treasure-overlay-spinner active='spinner.active'>
<table tr-ng-grid='' items='Employees' page-items="10"></table>
</treasure-overlay-spinner>
</div>
I tried as per the example suggested in plunker but not able to hide the modal, so can let me know how can I integrate it correctly
I changed my controller as follows and working as expected now
angular.module('app').controller('EmployeeController', function ($scope, $modal, appService) {
var employeesList = appService.GetEmployess();
$scope.spinner = {
active: true
};
employeesList.then(function successCallback(response) {
$scope.Employees = response.data;
}, function errorCallback(response) {
}).finally(function () {
$scope.spinner = {
active: false
};
});
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: '/app/views/EditEmployee.html',
controller: ModalInstanceCtrl,
size: size,
scope: $scope
});
console.log(modalInstance);
modalInstance.result.then(function (selectedItem) {
console.log('closed :' + selectedItem);
}, function () {
console.log('canceled');
});
};
$scope.otherFunction = function () {
console.log('otherFunction');
//DO SOME STUFF
//....
//THEN CLOSE MODAL HERE
}
});
var ModalInstanceCtrl = function ($scope, $modalInstance) {
$scope.ok = function () {
console.log('var var: ' + $scope.VARCONTROLLER);
$modalInstance.close('closed result');
};
$scope.cancel = function () {
console.log('cancel cancel');
$modalInstance.dismiss('cancel');
};
};
Sorry but I cant see in your code how have you tried to implement the modal view.
In your example, it´s made by this: (HTML:)
<button ng-click="open()" class="btn btn-default">MODAL3</button>
<script type="text/ng-template" id="myModalContent2.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal3!</h3>
</div>
<div class="modal-body">
<h3>MODAL TITLE</h3>
<button ng-click="otherFunction()" class="btn btn-default">Do stuff</button>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="close()">Cancel</button>
</div>
</script>
And into controllers (app.js):
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent2.html',
controller: ModalInstanceCtrl,
size: size,
scope: $scope
});
console.log(modalInstance);
modalInstance.result.then(function (selectedItem) {
console.log('closed :'+selectedItem);
}, function () {
console.log('canceled');
});
};
$scope.otherFunction = function () {
console.log('otherFunction');
//DO SOME STUFF
//....
//THEN CLOSE MODAL HERE
}
EDIT: I see in your controllers how have you tried to use open() and etc to open a modal view, but its not defined (with its script part) into html
EDIT2: THIS IS MY WAY TO USE MODALS: (controllers.js, inside the controller)
$scope.set = function() {
$scope.modal.hide();
}
$scope.cancel = function() {
//this is my function inside modal
$scope.modal.hide();
}
$scope.showModal = false;
$scope.show = function(){
$scope.showModal = !$scope.showModal;
};
$ionicModal.fromTemplateUrl('modal3.html', function(modal) {
$scope.modal = modal;
}, {
animation: 'slide-in-up',
focusFirstInput: true,
scope: $scope
});
In my html , like in the example, under the button to open:
<button class="row header" ng-click="modal.show()">mymodal</button></td>
<script id="modal3.html" type="text/ng-template">
<div class="modal">
*...stuff...*
</div>
</script>
I am trying to automatically check a checkbox when a modal closes. I am using one controller for the modal and another controller for the main page. The code below isn't working. Do I need to use a directive in order to accomplish this, or is there another way?
HTML - Main Page:
<label>
<input type="checkbox" ng-model="agreementForm.value1"> I agree.
</label>
HTML - Modal:
<div class="modal-footer">
<button ng-click="agreementForm.cancel()" class="btn btn-warning">Cancel</button>
<button ng-click="agreementForm.agree()" ng-disabled="agreementForm.$invalid" class="btn btn-primary" >I agree</button>
</div>
Javascript for Controllers:
myApp.controller('AgreementFormCtrl', function ($location, $stateParams, $modalInstance) {
var agreementForm = this;
agreementForm.cancel = function () {
$modalInstance.dismiss('cancel');
};
agreementForm.agree = function() {
agreementForm.value1=true;
$modalInstance.close(agreementForm.selected);
});
myApp.controller('ContactFormCtrl',
function ($location, $stateParams, Contacts) {
var contactForm = this;
});
contactForm.save = function () {
Contacts.$add(contactForm.contact).then(function (data) {
$location.path('/');
});
};
Router for Modal:
.state('payment.agreement', {
url: '/agreement',
onEnter: ['$stateParams', '$state', '$modal', function ($stateParams, $state, $modal) {
$modal.open({
templateUrl: 'views/agreement.html',
controller: 'AgreementFormCtrl as agreementForm'
}
)
.result.finally(function () {
$state.go('^');
});
}]
})
your can do it by using $rootScope and also you missed to initialzed the $scope
First you need to add ng-checked directive in the checkbox
<input type="checkbox" **ng-checked="agreementForm.IsChecked"**
ng-model="agreementForm.value1"> I agree.
Then you need initialize the rootscope in your controller
myApp.controller('AgreementFormCtrl', function ($location, $stateParams, $modalInstance,**$rootScope,$scope**) {
//code
};
and finally you can assign the value for checked object when a modal closes
$scope.agreementForm.cancel = function () {
$modalInstance.dismiss('cancel');
$rootScope.agreementForm.IsChecked="Checked";//True or false
};
I've spent some time having a play with the AngularJS Bootstrap popup, and for intents it's working great, but what i'd like to do is bind it, and it's dependant script to the same controller, what i can't get working is the close button now though. If i create a NEW controller, and inject $modalInstance it works great and i can wireup the close button without any issues at all, but i don't want a second controller, it seems to be over complication: i want all my controller logic in the formController really.
Why would i actually want two controllers? Passing the scope between two controllers just seems overkill to me, and the larger a project becomes the more un-managable it will become. Am i trying to over-simplify this unnecessarily? :)
The script:
(function(){
var app = angular.module('ngModalDemo', ['ui.bootstrap'])
.controller('formController', function($scope, $modal){
$scope.openModal = function () {
var modalInstance = $modal.open({
templateUrl: 'SomeModal.html',
controller: 'formController'
});
};
$scope.closeModal = function () {
// Code needed here :)
};
})
})();
The HTML body (excuse the HTML in script for the purposes of the DEMO):
<div ng-controller="formController">
<button class="btn btn-default" ng-click="openModal()">Let's do some stuff!</button>
<script type="text/ng-template" id="SomeModal.html">
<div class="modal-header">Do some stuff in this modal y'all.</div>
<div class="modal-footer">
<button class="btn btn-info" ng-click="closeModal()">Close</button>
</div>
</script>
</div>
The answer based on Kaspars' input :)
(function(){
var app = angular.module('ngModalDemo', ['ui.bootstrap'])
.controller('formController', function($scope, $modal, $log){
$scope.openModal = function () {
var modalInstance = $modal.open({
templateUrl: 'SomeModal.html',
controller: [
'$scope', '$modalInstance', function($scope, $modalInstance){
$scope.closeModal = function () {
$modalInstance.close();
};
}
]
});
};
})
})();
I was struggling with the same problem and the best thing I came up with was to use anonymous function as a modal controller. In that way all the logic is in the same controller and you don't have to create separate controller for each modal window.
This would look like this:
(function(){
var app = angular.module('ngModalDemo', ['ui.bootstrap'])
.controller('formController', function($scope, $modal){
$scope.openModal = function () {
var modalInstance = $modal.open({
templateUrl: 'SomeModal.html',
controller: [
'$scope', '$modalInstance', 'data', function($scope, $modalInstance, data) {
$scope.data = data;
$scope.ok = function() {
$modalInstance.close();
};
$scope.closeModal = function() {
$modalInstance.dismiss();
};
}
]
});
};
})
})();
PS. Haven't tested code above, just put it together from your provided code and fragments from one of my projects.
You can also try this
var modalInstance = $modal.open({
templateUrl : 'someTemplate.html',
scope : $scope,
size : 'md'
});
I have downloaded some of the angular UI directives, as i do not need them all. I have downloaded the latest file for modal from http://angular-ui.github.io/bootstrap/ and using this code
App.controller('PagesController', ['$scope', '$modal', 'PageFactory', function ($scope, $modal, PageFactory) {
$scope.pages = [];
PageFactory.getPages().then(function (pages) {
$scope.pages = pages;
}, function (err) {
console.log(err.message);
});
$scope.deletePage = function (page) {
var modalInstance = $modal.open({
templateUrl: 'pages-delete-modal.html',
controller: ['$scope', '$modalInstance', function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}]
});
modalInstance.result.then(function () {
// ok selected
}, function () {
});
};
}]);
Here is the template
<script type="text/ng-template" id="pages-delete-modal.html">
<div class="modal-header">
<h3 class="modal-title">Delete Confirmation</h3>
</div>
<div class="modal-body">
Are you sure you want to delete this page?
</div>
<div class="modal-footer">
<button class="btn btn-danger" ng-click="ok()">Delete</button>
<button class="btn btn-default" ng-click="cancel()">Cancel</button>
</div>
</script>
Now i seem to get an error saying
http://errors.angularjs.org/1.2.23/$injector/unpr?p0=%24modalProvider%20%3C-%20%24modal
I already have 'ui.bootstrap' injected into my app.js file here as you can see
var App = angular.module('MyApp', ['ui.router', 'ui.bootstrap']);
If i however use this link, instead of using the downloaded modal file, it works?
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
I have also downloaded the transition directive as i believe the modal directive is dependant on this, but i cannot see that i am missing anything else.
I am using the tpl.min.js files for both transition and modal.
Any help much appreciated
You should try change the modalInstance controller to a string with the name of an actual controller in your project.
$scope.deletePage = function (page) {
var modalInstance = $modal.open({
templateUrl: 'pages-delete-modal.html',
controller: 'otherCtrl'
});
modalInstance.result.then(function () {
// ok selected
}, function () {
});
};
and then create the controller itself
App.controller('otherCtrl',['$scope','$modalInstance', function($scope,$modalInstance){
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}]);
I want to show a modal box asking the user if they want to delete a post or not. I can't figure out how to pass the key which I pass in the key argument in which I also can alert.
I took the code from the angular twitterbootstrap site but I can't figure out a method to pass data to confirm the remove.
Thanks
Mohammad
$scope.deletePost = function(key, post, event) {
alert(key);
var modalInstance = $modal.open({
templateUrl: 'deletePost.html',
controller: ModalInstanceCtrl,
resolve: {
items: function() {
return $scope.posts;
}
},
})
modalInstance.result.then(function(selectedItem) {
$scope.selected = selectedItem;
alert(selectedItem);
});
};
var ModalInstanceCtrl = function($scope, $modalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function() {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
};
Send the key via resolve as a parameter (see plunker):
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {
var key = 1000;
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
items: function () {
return $scope.items;
},
key: function() {return key; }
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
};
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
var ModalInstanceCtrl = function ($scope, $modalInstance, items, key) {
alert("The key is " + key)
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
I would suggest using Bootstrap components written by the AngularUI Team. you can find a great set of Twitter Bootstrap components including Modal control.
Example:
html:
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a ng-click="selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<button class="btn btn-default" ng-click="open()">Open me!</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
js:
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
};
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
Live example: http://plnkr.co/edit/xIjUONEVhY5lO2kLhV4f?p=preview